Angular JS Respond to Change made From Javascript

Question

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: * http://jsfiddle.net/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 overcome 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.com/ajax/libs/jqueryui/1.8.16/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/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.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/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;
                    };
}

Joseph Silber · Accepted Answer · 2013-01-29 18:02:09Z

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();

edited Jan 29, 2013 at 18:02

answered Jan 29, 2013 at 17:32

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vsp Over a year ago

Make sure you're using ng-click, not onclick.

Marc Over a year ago

I'm pretty sure I get what you're saying. I wish I had provided a better example with a jQuery spinner in it... is there a way to access/increment qty from within a spinner, e.g. in the spin method?

Marc Over a year ago

@JosephSilber Point taken. Thanks for your patience. Please see above.

Joseph Silber Over a year ago

@Marc - To change the model from outside angular's apply/digest cycle, you have to get a reference to the scope, make your changes, then call $digest. I added this information to my answer.

Marc Over a year ago

@JosephSilber, thanks a lot! I think I'll have fun w/this framework once I get a little more familiar.

Collectives™ on Stack Overflow

Angular JS Respond to Change made From Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related