Pantau pembolehubah Skop dan panggil kaedah Skop secara luaran dalam AngularJS_AngularJS

Dalam AngularJS, kadangkala anda perlu memantau pembolehubah dalam Skop, kerana perubahan dalam pembolehubah akan menjejaskan paparan beberapa elemen antara muka. Kadangkala, anda juga ingin memanggil kaedah Skop melalui jQuery.

Sebagai contoh, senario berikut:

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

Di atas, kami berharap:

● Jika nilai pembolehubah jQBtnState dalam Skop adalah palsu, lumpuhkan butang dengan id jQBtn
● Klik butang dengan ID jQBtn untuk memanggil kaedah dalam Skop untuk meningkatkan pembilang pembolehubah dalam Skop sebanyak 1

Kami mungkin menulis:

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

Malah, anda boleh menggunakan kaedah $watch untuk memantau perubahan dalam pembolehubah dalam Skop, dan memanggil fungsi panggil balik apabila perubahan berlaku.

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

Di atas, apabila nilai pembolehubah jQBtnState adalah palsu, butang dengan id jQBtn akan dilumpuhkan.

Bagaimanakah dunia luar memanggil kaedah Scope?

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

Di atas, dengan mendapatkan Skop, gunakan kaedah $apply untuk memanggil kaedah jQBtnClick dalam Skop untuk meningkatkan pembilang pembolehubah Skop sebanyak 1.

Di atas adalah pengetahuan yang berkaitan tentang memantau pembolehubah Skop dan memanggil kaedah Skop secara luaran dalam AngularJS saya harap ia akan membantu semua orang.