AngularJS では、変数の変更が一部のインターフェイス要素の表示に影響を与えるため、スコープ内の変数を監視する必要がある場合があります。場合によっては、jQuery を通じて Scope のメソッドを呼び出したい場合もあります。
たとえば、次のシナリオ:
<div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input type="checkbox" ng-model="jQBtnState"/> Toggle jQ button state <p>Counter: {{counter}}</p> </div>
上記のとおり、私たちは次のことを望んでいます。
● Scope の jQBtnState 変数値が false の場合、ID jQBtn のボタンを無効にします
● ID jQBtn のボタンをクリックしてスコープ内のメソッドを呼び出し、スコープ内の変数カウンターを 1 つ増やします
次のように書くとよいでしょう。
$('#jQBtn').on("click", function(){ console.log("JQuery button clicked"); //需要考虑的问题是: //这里如何调用Scope中的某个方法,使Scope的的变量counter自增1 })
...
myApp.controller("NGCtrl", function($scope){ $scope.counter = 0; //这里,怎么让jQBtnState变量值发生变化告之外界呢? $scope.jQBtnState = false; $scope.jQBtnClick = function(){ $scope.counter++; } })
実際、$watch メソッドを使用してスコープ内の変数の変更を監視し、変更が発生したときにコールバック関数を呼び出すことができます。
myApp.controller("NGCtrl", function($scope){ $scope.counter = 0; $scope.jQBtnState = false; $scope.$watch("jQBtnState", function(newVal){ $('#jQBtn').attr('disabled', newVal); }); $scope.jQBtnClick = function(){ $scope.counter++; } })
上記では、jQBtnState 変数の値が false の場合、ID jQBtn のボタンは無効になります。
外の世界は Scope のメソッドをどのように呼び出しますか?
--先获取Scope,然后使用$apply方法调用Scope内的方法。 $('#jQBtn').on("click", function(){ console.log("JQuery button clicked"); var scope = angular.element(ngSection).scope(); scope.$apply(function(){ scope.jQBtnClick(); }); })
上記では、スコープを取得して、$apply メソッドを使用してスコープ内の jQBtnClick メソッドを呼び出し、スコープの変数カウンターを 1 増やします。
上記は、AngularJS での Scope 変数の監視と Scope メソッドの外部呼び出しに関する関連知識です。皆様のお役に立てれば幸いです。