對(duì)angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解
$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);
以上這篇對(duì)angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在Angular中,NgZone是一個(gè)服務(wù),用于管理異步任務(wù)的執(zhí)行,并提供一種在Angular區(qū)域內(nèi)或外部顯式運(yùn)行代碼的方式,NgZone.run方法是一種顯式在Angular區(qū)域內(nèi)運(yùn)行函數(shù)的方式,本文介紹Angular中的NgZone.run()有什么用,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了詳解AngularJS中的表達(dá)式使用,包括處理數(shù)字和字符串等各種對(duì)象的操作,需要的朋友可以參考下2015-06-06
使用Angular 6創(chuàng)建各種動(dòng)畫(huà)效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫(huà)。我們將通過(guò)本文學(xué)習(xí)到如何使用Angular 6來(lái)創(chuàng)建各種動(dòng)畫(huà)效果。在此，我們將使用Visual Studio Code來(lái)進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)
這篇文章主要介紹了淺談Angular7 項(xiàng)目開(kāi)發(fā)總結(jié)，本文在此做一次遇到問(wèn)題的總結(jié)，以便知識(shí)的掌握，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
本文主要講解AngularJs directive的知識(shí)，這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實(shí)現(xiàn)多個(gè)頁(yè)面共享數(shù)據(jù)的方式，通過(guò)定義一個(gè)共享服務(wù)service來(lái)實(shí)現(xiàn)此功能，對(duì)angularjs共享數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)2016-03-03
AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法
這篇文章主要介紹了AngularJS基于ngInfiniteScroll實(shí)現(xiàn)下拉滾動(dòng)加載的方法,結(jié)合實(shí)例形式分析AngularJS下拉滾動(dòng)插件ngInfiniteScroll的下載、功能、屬性及相關(guān)使用方法,需要的朋友可以參考下2016-12-12
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular.js ng-file-upload結(jié)合springMVC的使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07