Überwachen Sie Scope-Variablen und rufen Sie Scope-Methoden extern in AngularJS_AngularJS auf

In AngularJS müssen Sie manchmal eine Variable in Scope überwachen, da Änderungen an Variablen die Anzeige einiger Schnittstellenelemente beeinflussen. Manchmal möchten Sie auch eine Methode von Scope über jQuery aufrufen.

Zum Beispiel das folgende Szenario:

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

Oben hoffen wir:

● Wenn der Wert der Variablen jQBtnState in Scope falsch ist, deaktivieren Sie die Schaltfläche mit der ID jQBtn
● Klicken Sie auf die Schaltfläche mit der ID jQBtn, um eine Methode in Scope aufzurufen, um den Variablenzähler in Scope um 1 zu erhöhen

Wir könnten schreiben:

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

Tatsächlich können Sie die Methode $watch verwenden, um Änderungen in einer Variablen in Scope zu überwachen und die Rückruffunktion aufzurufen, wenn Änderungen auftreten.

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

Wenn oben der Wert der jQBtnState-Variablen falsch ist, wird die Schaltfläche mit der ID jQBtn deaktiviert.

Wie nennt die Außenwelt die Methoden von Scope?

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

Wenn Sie oben den Scope erhalten, verwenden Sie die Methode $apply, um die jQBtnClick-Methode im Scope aufzurufen und den Variablenzähler des Scope um 1 zu erhöhen.

Das Obige ist das relevante Wissen über die Überwachung von Scope-Variablen und den externen Aufruf von Scope-Methoden in AngularJS. Ich hoffe, es wird für alle hilfreich sein.