淺談Angular.js中使用$watch監(jiān)聽(tīng)模型變化
$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);
$watch性能問(wèn)題
太多的$watch將會(huì)導(dǎo)致性能問(wèn)題,$watch如果不再使用,我們最好將其釋放掉。
$watch函數(shù)返回一個(gè)注銷監(jiān)聽(tīng)的函數(shù),如果我們想監(jiān)控一個(gè)屬性,然后在稍后注銷它,可以使用下面的方式:
var watch = $scope.$watch('someModel.someProperty', callback); //... watch();
還有2個(gè)和$watch相關(guān)的函數(shù):
$watchGroup(watchExpressions, listener); $watchCollection(obj, listener);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
angularJs自定義過(guò)濾器實(shí)現(xiàn)手機(jī)號(hào)信息隱藏的方法
今天小編就為大家分享一篇angularJs自定義過(guò)濾器實(shí)現(xiàn)手機(jī)號(hào)信息隱藏的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法
幾乎每個(gè)web應(yīng)用都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要介紹了angular 實(shí)現(xiàn)同步驗(yàn)證器跨字段驗(yàn)證的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04angular select 默認(rèn)值設(shè)置方法
下面小編就為大家?guī)?lái)一篇angular select 默認(rèn)值設(shè)置方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟
這篇文章主要給大家介紹了關(guān)于利用angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-07-07解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題
今天小編就為大家分享一篇解決angular2在雙向數(shù)據(jù)綁定時(shí)[(ngModel)]無(wú)法使用的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-10-10angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼
本篇文章主要介紹了angularjs+bootstrap實(shí)現(xiàn)自定義分頁(yè)的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06AngularJS中實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
本文主要介紹AngularJS 動(dòng)畫(huà),這里對(duì)動(dòng)畫(huà)的資料詳細(xì)介紹并附有效果圖和代碼實(shí)例,有需要的小伙伴參考下2016-07-07angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單),詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-12-12