AngularJS實(shí)現(xiàn)一次監(jiān)聽(tīng)多個(gè)值發(fā)生的變化
一、$watch簡(jiǎn)單使用
$watch是一個(gè)scope函數(shù),用于監(jiān)聽(tīng)模型變化,當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。
$watch(watchExpression, listener, objectEquality);
每個(gè)參數(shù)的說(shuō)明如下:
watchExpression:監(jiān)聽(tīng)的對(duì)象,它可以是一個(gè)angular表達(dá)式如'name',或函數(shù)如function(){return $scope.name} 。
listener:當(dāng)watchExpression變化時(shí)會(huì)被調(diào)用的函數(shù)或者表達(dá)式,它接收3個(gè)參數(shù):newValue(新值), oldValue(舊值), scope(作用域的引用)
objectEquality:是否深度監(jiān)聽(tīng),如果設(shè)置為true,它告訴Angular檢查所監(jiān)控的對(duì)象中每一個(gè)屬性的變化. 如果你希望監(jiān)控?cái)?shù)組的個(gè)別元素或者對(duì)象的屬性而不是一個(gè)普通的值, 那么你應(yīng)該使用它
舉個(gè)栗子:
$scope.name = 'hello';
var watch = $scope.$watch('name',function(newValue,oldValue, scope){
console.log(newValue);
console.log(oldValue);
});
$timeout(function(){
$scope.name = "world";
},1000);
二、監(jiān)聽(tīng)多個(gè)值的變化
大家通常遇到的情況為通過(guò)$watch()一次監(jiān)聽(tīng)一個(gè)值的變化,當(dāng)然這種時(shí)候滿(mǎn)足絕大部分情況。但是通過(guò)閱讀官網(wǎng)對(duì)于$watch()的解釋?zhuān)?code>$watch()還有第三個(gè)參數(shù),第三個(gè)參數(shù)是一個(gè)布爾類(lèi)型,表示是否深度監(jiān)聽(tīng),深度監(jiān)聽(tīng)的例子就是是否進(jìn)行比較對(duì)象的屬性。
這樣我們就可以實(shí)現(xiàn)一次監(jiān)聽(tīng)多個(gè)值的變化。
示例代碼
var app=angular.module("watchApp",[])
.controller("watchController",["$scope",function($scope){
$scope.object={};
$scope.object.one=$scope.one;
$scope.object.one=$scope.one;
$scope.$watch("object",function(){
.....
},true);
}])
總結(jié)
以上就是關(guān)于A(yíng)ngularJS如何一次監(jiān)聽(tīng)多個(gè)值發(fā)生變化的全部?jī)?nèi)容,大家都學(xué)會(huì)了嗎?希望這篇文章的內(nèi)容對(duì)大家的學(xué)習(xí)和工作能有所幫助,如果有疑問(wèn)可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過(guò)濾并替換關(guān)鍵字小功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
AngularJS基礎(chǔ)學(xué)習(xí)筆記之指令
指令(Directives)是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令,但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令,以及介紹如何在實(shí)際項(xiàng)目中使用。2015-05-05
angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼
本篇文章主要介紹了angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
實(shí)例詳解angularjs和ajax的結(jié)合使用
本篇文章給大家介紹angularjs和ajax的結(jié)合使用,本文介紹的非常詳細(xì),對(duì)angularjs和ajax感興趣的朋友一起參考下吧2015-10-10
angular2 組件之間通過(guò)service互相傳遞的實(shí)例
今天小編就為大家分享一篇angular2 組件之間通過(guò)service互相傳遞的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

