淺談Angular.js中使用$watch監(jiān)聽模型變化
更新時(shí)間：2017年01月10日 10:11:27 作者：袁克強(qiáng)
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化，有興趣的可以了解一下
$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);
$watch性能問題
太多的$watch將會(huì)導(dǎo)致性能問題，$watch如果不再使用，我們最好將其釋放掉。
$watch函數(shù)返回一個(gè)注銷監(jiān)聽的函數(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)文章
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了AngularJS初始化過程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包詳解
基于流的前端自動(dòng)化構(gòu)建工具，利用gulp可以提高前端開發(fā)效率，特別是在前后端分離的項(xiàng)目中。下面這篇文章主要給大家介紹了關(guān)于在Angular.js項(xiàng)目中使用gulp實(shí)現(xiàn)自動(dòng)化構(gòu)建以及壓縮打包的相關(guān)資料，需要的朋友可以參考下。2017-07-07
如何在AngularJs中調(diào)用第三方插件庫(kù)
在AngularJs中我們會(huì)不可避免的使用第三方庫(kù)，這篇文章主要介紹了如何在AngularJs中調(diào)用第三方插件庫(kù)，有興趣的可以了解下2017-05-05
Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開發(fā)經(jīng)驗(yàn)的開發(fā)者，了解本文中的12個(gè)經(jīng)典面試問題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular2的知識(shí)概念的絕佳途徑。2021-05-05
AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了Angular4中常用管道，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05