AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法
更新時(shí)間：2016年01月23日 12:07:34 作者：Darren Ji
在AngularJS中，有時(shí)候需要監(jiān)視Scope中的某個(gè)變量，因?yàn)樽兞康母淖儠绊懸恍┙缑嬖氐娘@示，接下來通過本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法，需要的朋友參考下吧
在AngularJS中，有時(shí)候需要監(jiān)視Scope中的某個(gè)變量，因?yàn)樽兞康母淖儠绊懸恍┙缑嬖氐娘@示。有時(shí)，也希望通過jQuery調(diào)用Scope的某個(gè)方法。
比如以下場景：
<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中的某個(gè)方法讓Scope中的變量counter自增1
我們可能會這樣寫：
$('#jQBtn').on("click", function(){
console.log("JQuery button clicked");
//需要考慮的問題是：
//這里如何調(diào)用Scope中的某個(gè)方法，使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某個(gè)變量的變化，當(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的時(shí)候就會禁用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)知識，希望對大家有所幫助。
相關(guān)文章
這篇文章主要介紹了AngularJS上拉加載問題解決方法的相關(guān)資料,該問題在項(xiàng)目中一直存在，小編給大家分享解決辦法，需要的朋友可以參考下2016-05-05
AngularJs ng-route路由詳解及實(shí)例代碼
這篇文章主要介紹了AngularJs ng-route路由,這里整理相關(guān)資料及簡單實(shí)例代碼，有興趣的小伙伴可以參考下2016-09-09
這篇文章主要介紹了在Angular中使用JWT認(rèn)證方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
經(jīng)歷了 6 個(gè) RC 版本之后，Angular 發(fā)布了 4.0.0 正式版。下面這篇文章主要給大家介紹了關(guān)于Web前端框架Angular4.0.0 正式版發(fā)布的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來一起看看吧。2017-03-03
今天小編就為大家分享一篇Angular4 Select選擇改變事件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例
這篇文章主要介紹了Angular學(xué)習(xí)筆記之集成三方UI框架、控件的示例，詳細(xì)的介紹了Material UI、Ag-grid等框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
本篇文章主要介紹了Angularjs中使用layDate日期控件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
Angular2使用Angular-CLI快速搭建工程（二）
這篇文章主要介紹了Angular2使用Angular-CLI快速搭建工程（二）,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Angular4學(xué)習(xí)教程之DOM屬性綁定詳解
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之DOM屬性綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01