AngularJS中監視Scope變數以及外部調用Scope方法_AngularJS

在AngularJS中，有時候需要監視Scope中的某個變數，因為變數的改變會影響一些介面元素的顯示。有時，也希望通過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的按鈕調用Scope中的某個方法讓Scope中的變數counter自增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方法可以監視Scope某個變數的變化，當變化發生調用回呼函數。

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

以上，通過擷取Scope,使用$apply方法調用Scope內的jQBtnClick方法使Scope呢的變數counter自增1。

以上所述是針對AngularJS中監視Scope變數以及外部調用Scope方法 的相關知識，希望對大家有所協助。