首頁 > web前端 > js教程 > AngularJS中監視Scope變數以及外部呼叫Scope方法_AngularJS

AngularJS中監視Scope變數以及外部呼叫Scope方法_AngularJS

WBOY
發布: 2016-05-16 15:18:33
原創
1456 人瀏覽過

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板