angularjs - Angular JS Respond to Change made From Javascript

I'm new to AngularJS. I'm trying to make my elements update when specific values change, however changes aren't being triggered when the values change via JS; they're only happening when values are manually entered/blurred in the input box.

My simple example, branched from the Angular Dev Guide, is here: * / *

<!-- Angular HTML -->
<div ng-app="">
<div ng-controller="InvoiceCntl">
  <b>Invoice:</b>
  <br>
  <br>
  <table>
   <tr><td>Quantity</td><td>Cost</td></tr>
   <tr>
   <td><input type="integer" min="0" ng-model="qty" required id="myqty"></td>
   <td><input type="number" ng-model="cost" required ></td>
   </tr>
  </table>
  <hr>
  <b>Total:</b> {{qty * cost | currency}}
</div>
</div>
<button onclick="document.getElementById('myqty').value=document.getElementById('myqty').value*1+1;">Increment Qty</button>

Angular Controller JS:

//Angular Controller JS
function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
}

Note that when the user changes values in the qty/price boxes manually (via keyboard), the total is updated. However, when the user clicks the "Increment" button, the total does not update.

Can anyone explain how to overe this in my simple example? I'd like to avoid something too hacky, so is there a best practice for handling this kind of scenario?

Notes:

I'm planning to use a jQuery spinner widget to do the incrementing in my real-life example
I'll be using a custom function to do calculations (vs. a simple expression)
I assume the solution to the simple solution above will translate to my spinner/custom function use case

BIG EDIT

Here's the actual code I'm using (sorry, a closed network issue prevented me from posting in the first place):

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
  <head>
    <link href=".8.16/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src=".0.4/angular.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src=".min.js" type="text/javascript"></script>
    <script src=".min.js" type="text/javascript"></script>
    <script>
    //inline JS here
    $(function() {
        var spinner = $( "#qtySpinner" ).spinner({
            spin: function( event, ui ) {
                qty++;
            }
        });
    });
    </script>
    <title>Angular Testing</title>
  </head>
  <body>
    <div ng-controller="InvoiceCntl">
      <b>Invoice:</b><br>
      <br>
      <table>
        <tr>
          <td>
            Quantity
          </td>
          <td>
            Cost
          </td>
        </tr>
        <tr>
          <td>
            <input id="qtySpinner" type="integer" min="0" ng-model="qty" required="" ng-change="calculate(qty,cost);">
          </td>
          <td>
            <input type="number" ng-model="cost" required="">
          </td>
        </tr>
      </table>
      <hr>
      <b>Total:</b> {{calculate(qty,cost)}}
    </div>
    <br>
    <b>Dummy Experimental Buttons</b>
    <br>
    <button onclick="alert($('#qtySpinner').val());$('#qtySpinner').val(10);">Set 10</button>
    <button ng-click="qty++">Inc</button>
  </body>
</html>

Javscript here:

function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
   $scope.calculate = function calculate(xval, yval) {
                        return xval * yval;
                    };
}

My simple example, branched from the Angular Dev Guide, is here: * http://jsfiddle/3R5wn/ *

<!-- Angular HTML -->
<div ng-app="">
<div ng-controller="InvoiceCntl">
  <b>Invoice:</b>
  <br>
  <br>
  <table>
   <tr><td>Quantity</td><td>Cost</td></tr>
   <tr>
   <td><input type="integer" min="0" ng-model="qty" required id="myqty"></td>
   <td><input type="number" ng-model="cost" required ></td>
   </tr>
  </table>
  <hr>
  <b>Total:</b> {{qty * cost | currency}}
</div>
</div>
<button onclick="document.getElementById('myqty').value=document.getElementById('myqty').value*1+1;">Increment Qty</button>

Angular Controller JS:

//Angular Controller JS
function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
}

Note that when the user changes values in the qty/price boxes manually (via keyboard), the total is updated. However, when the user clicks the "Increment" button, the total does not update.

Can anyone explain how to overe this in my simple example? I'd like to avoid something too hacky, so is there a best practice for handling this kind of scenario?

Notes:

I'm planning to use a jQuery spinner widget to do the incrementing in my real-life example
I'll be using a custom function to do calculations (vs. a simple expression)
I assume the solution to the simple solution above will translate to my spinner/custom function use case

BIG EDIT

Here's the actual code I'm using (sorry, a closed network issue prevented me from posting in the first place):

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
  <head>
    <link href="http://ajax.googleapis./ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="http://ajax.googleapis./ajax/libs/angularjs/1.0.4/angular.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis./ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
    <script>
    //inline JS here
    $(function() {
        var spinner = $( "#qtySpinner" ).spinner({
            spin: function( event, ui ) {
                qty++;
            }
        });
    });
    </script>
    <title>Angular Testing</title>
  </head>
  <body>
    <div ng-controller="InvoiceCntl">
      <b>Invoice:</b><br>
      <br>
      <table>
        <tr>
          <td>
            Quantity
          </td>
          <td>
            Cost
          </td>
        </tr>
        <tr>
          <td>
            <input id="qtySpinner" type="integer" min="0" ng-model="qty" required="" ng-change="calculate(qty,cost);">
          </td>
          <td>
            <input type="number" ng-model="cost" required="">
          </td>
        </tr>
      </table>
      <hr>
      <b>Total:</b> {{calculate(qty,cost)}}
    </div>
    <br>
    <b>Dummy Experimental Buttons</b>
    <br>
    <button onclick="alert($('#qtySpinner').val());$('#qtySpinner').val(10);">Set 10</button>
    <button ng-click="qty++">Inc</button>
  </body>
</html>

Javscript here:

function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
   $scope.calculate = function calculate(xval, yval) {
                        return xval * yval;
                    };
}

Share Improve this question edited Jan 29, 2013 at 17:56 asked Jan 29, 2013 at 17:30 Marc 11.6k2 gold badges39 silver badges48 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

Angular is built so that you don't have to interact with the DOM. Instead, just put the calculation - as simple JavaScript - in an ng-click attribute:

<button ng-click="qty++">Increment Qty</button>

Alternatively, you can put a method on your $scope, which you can then call from within ng-click:

function InvoiceCntl($scope) {
   $scope.qty = 1;
   $scope.cost = 19.95;
   $scope.increment = function () {
      $scope.qty++;
   };
}

Then, in your view, just call that function:

<button ng-click="increment()">Increment Qty</button>

Update: To update the scope from outside the angular digest cycle, you have to first get a reference to the scope, make your changes, then manually call $digest, so that the view gets updated:

var scope = angular.element('#qtySpinner').scope();
scope.qty++;
scope.$digest();

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

angularjs - Angular JS Respond to Change made From Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)