<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的按鈕禁用
● 點(diǎn)擊id為jQBtn的按鈕調(diào)用Scope中的某個方法讓Scope中的變量counter自增1

我們可能會這樣寫：

$('#jQBtn').on("click", function(){
console.log("JQuery button clicked");
//需要考慮的問題是：
//這里如何調(diào)用Scope中的某個方法，使Scope的的變量counter自增1
})

...

myApp.controller("NGCtrl", function($scope){
$scope.counter = 0;
//這里，怎么讓jQBtnState變量值發(fā)生變化告之外界呢？
$scope.jQBtnState = false;
$scope.jQBtnClick = function(){
$scope.counter++;
}
})

其實(shí)，使用$watch方法可以監(jiān)視Scope某個變量的變化，當(dāng)變化發(fā)生調(diào)用回調(diào)函數(shù)。

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

以上，當(dāng)jQBtnState變量值為false的時候就會禁用id為jQBtn的按鈕。

外界如何調(diào)用Scope的方法呢？

--先獲取Scope,然后使用$apply方法調(diào)用Scope內(nèi)的方法。
$('#jQBtn').on("click", function(){
console.log("JQuery button clicked");
var scope = angular.element(ngSection).scope();
scope.$apply(function(){
scope.jQBtnClick();
});
})

以上，通過獲取Scope,使用$apply方法調(diào)用Scope內(nèi)的jQBtnClick方法使Scope呢的變量counter自增1。

以上所述是針對AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法的相關(guān)知識，希望對大家有所幫助。

您可能感興趣的文章: