1

AngularJSは初めてです。特定の値が変更されたときに要素を更新しようとしていますが、JSを介して値が変更されたときに変更がトリガーされません。これらは、入力ボックスに値を手動で入力/ぼかした場合にのみ発生します。

Angular Dev Guideから分岐した私の簡単な例は、次のとおりです。 * 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;
}

ユーザーが数量/価格ボックスの値を手動で（キーボードを使用して）変更すると、合計が更新されることに注意してください。ただし、ユーザーが「インクリメント」ボタンをクリックしても、合計は更新されません。

私の簡単な例でこれを克服する方法を誰かが説明できますか？あまりにもハッキーなことは避けたいので、この種のシナリオを処理するためのベストプラクティスはありますか？

ノート：

  • 実際の例では、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>

ここにJavscript：

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 に答える