Surveiller les variables Scope et appeler en externe les méthodes Scope dans AngularJS_AngularJS

Dans AngularJS, vous devez parfois surveiller une variable dans Scope, car les modifications apportées aux variables affecteront l'affichage de certains éléments de l'interface. Parfois, vous souhaitez également appeler une méthode de Scope via jQuery.

Par exemple, le scénario suivant :

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

Ci-dessus, nous espérons :

● Si la valeur de la variable jQBtnState dans Scope est fausse, désactivez le bouton avec l'identifiant jQBtn
● Cliquez sur le bouton avec l'ID jQBtn pour appeler une méthode dans Scope pour augmenter le compteur de variables dans Scope de 1

On pourrait écrire :

$('#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++;
}
}) 

En fait, vous pouvez utiliser la méthode $watch pour surveiller les changements dans une variable dans Scope et appeler la fonction de rappel lorsque des changements se produisent.

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

Ci-dessus, lorsque la valeur de la variable jQBtnState est fausse, le bouton avec l'identifiant jQBtn sera désactivé.

Comment le monde extérieur appelle-t-il les méthodes de Scope ?

--先获取Scope,然后使用$apply方法调用Scope内的方法。
$('#jQBtn').on("click", function(){
console.log("JQuery button clicked");
var scope = angular.element(ngSection).scope();
scope.$apply(function(){
scope.jQBtnClick();
});
}) 

Ci-dessus, en obtenant le Scope, utilisez la méthode $apply pour appeler la méthode jQBtnClick dans le Scope pour augmenter le compteur variable du Scope de 1.

Ce qui précède contient les connaissances pertinentes sur la surveillance des variables Scope et l'appel externe des méthodes Scope dans AngularJS. J'espère que cela sera utile à tout le monde.