1

我是 AngularJS 的新手。我试图在特定值更改时更新我的​​元素，但是当值通过 JS 更改时不会触发更改；它们仅在输入框中手动输入/模糊值时才会发生。

我的简单示例来自 Angular 开发指南，在这里： * 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>

角度控制器 JS：

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

请注意，当用户手动（通过键盘）更改数量/价格框中的值时，总数会更新。但是，当用户单击“增量”按钮时，总数不会更新。

谁能在我的简单示例中解释如何克服这个问题？我想避免一些过于 hacky 的事情，那么有处理这种情况的最佳实践吗？

笔记：

  • 我打算在我的真实示例中使用 jQuery 微调器小部件来进行递增
  • 我将使用自定义函数进行计算（与简单表达式相比）
  • 我假设上述简单解决方案的解决方案将转化为我的微调器/自定义函数用例

大编辑

这是我正在使用的实际代码（抱歉，一个封闭的网络问题阻止了我首先发布）：

    <!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>

Javascript在这里：

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

1 回答 1

8

Angular 的构建使您不必与 DOM 交互。相反，只需将计算 - 作为简单的 JavaScript - 放在一个ng-click属性中：

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

或者，您可以在您的 上放置一个方法$scope，然后您可以从内部调用该方法ng-click：

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

然后，在您看来，只需调用该函数：

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

更新：要从角度摘要循环之外更新范围，您必须首先获取对范围的引用，进行更改，然后手动调用$digest，以便更新视图：

var scope = angular.element('#qtySpinner').scope();
scope.qty++;
scope.$digest();
于 2013-01-29T17:32:19.627 回答