スコープ変数を監視し、AngularJS_AngularJS でスコープ メソッドを外部から呼び出す

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 メソッドの外部呼び出しに関する関連知識です。皆様のお役に立てれば幸いです。