CODEWITHSUNDEEP
javascriptangularjs
Marc
Marc

Reputation: 11633

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: * 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:

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;
                    };
}

Upvotes: 1

Views: 3675

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 220136

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

Upvotes: 8

Related Questions