AngularJS實(shí)現(xiàn)一次監(jiān)聽多個(gè)值發(fā)生的變化
一、$watch簡(jiǎn)單使用
$watch
是一個(gè)scope
函數(shù),用于監(jiān)聽模型變化,當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。
$watch(watchExpression, listener, objectEquality);
每個(gè)參數(shù)的說明如下:
watchExpression:監(jiān)聽的對(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)聽,如果設(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)聽多個(gè)值的變化
大家通常遇到的情況為通過$watch()
一次監(jiān)聽一個(gè)值的變化,當(dāng)然這種時(shí)候滿足絕大部分情況。但是通過閱讀官網(wǎng)對(duì)于$watch()
的解釋,$watch()
還有第三個(gè)參數(shù),第三個(gè)參數(shù)是一個(gè)布爾類型,表示是否深度監(jiān)聽,深度監(jiān)聽的例子就是是否進(jìn)行比較對(duì)象的屬性。
這樣我們就可以實(shí)現(xiàn)一次監(jiān)聽多個(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)于AngularJS如何一次監(jiān)聽多個(gè)值發(fā)生變化的全部?jī)?nèi)容,大家都學(xué)會(huì)了嗎?希望這篇文章的內(nèi)容對(duì)大家的學(xué)習(xí)和工作能有所幫助,如果有疑問可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
AngularJS向后端ASP.NET API控制器上傳文件
這篇文章主要介紹了AngularJS向后端ASP.NET API控制器上傳文件的相關(guān)資料,需要的朋友可以參考下2016-02-02使用Angular內(nèi)置模塊進(jìn)行HTTP請(qǐng)求
這篇文章主要介紹了使用Angular內(nèi)置模塊進(jìn)行HTTP請(qǐng)求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10使用AngularJS制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫,文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下2015-06-06Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用(三)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ClassProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular 4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考借鑒,下面來一起看看吧。2017-06-06對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別,十分的詳細(xì),是篇非常不錯(cuò)的文章,這里推薦給小伙伴們。2015-02-02舉例簡(jiǎn)介AngularJS的內(nèi)部語言環(huán)境
這篇文章主要介紹了AngularJS的內(nèi)部語言環(huán)境,展示不同語言環(huán)境下對(duì)貨幣或是日期等文本方面所產(chǎn)生的影響,需要的朋友可以參考下2015-06-06Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色的核心代碼
這篇文章主要介紹了Angular中點(diǎn)擊li標(biāo)簽實(shí)現(xiàn)更改顏色的核心代碼,需要的朋友可以參考下2017-12-12