在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方法 的相關知識,希望對大家有幫助。