對(duì)angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解
$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);
以上這篇對(duì)angular 監(jiān)控?cái)?shù)據(jù)模型變化的事件方法$watch詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
前端開發(fā)中，為了對(duì)列表項(xiàng)進(jìn)行快捷操作，有時(shí)就添個(gè)按鈕來簡(jiǎn)單實(shí)現(xiàn)。但是，有時(shí)會(huì)發(fā)現(xiàn)按鈕影響美觀，甚至影響列表行的布局。稍在網(wǎng)上搜索無果，而寫此仿蘋果滑屏刪除控件2016-01-01
本文主要講解AngularJS表達(dá)式,這里整理了相關(guān)資料和提供示例代碼以及實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下2016-08-08
Angularjs中三種數(shù)據(jù)的綁定策略(“@”，“=”，“&”)
在AngularJS的指令中存在著三種綁定策略，他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié)
AngularJS 是一個(gè) JavaScript 框架。它是一個(gè)以 JavaScript 編寫的庫。這篇文章主要介紹了Angular動(dòng)態(tài)綁定樣式及改變UI框架樣式的方法小結(jié),需要的朋友可以參考下2018-09-09
Angular發(fā)布1.5正式版，專注于向Angular 2的過渡
Angular團(tuán)隊(duì)最近發(fā)布了Angular 1.5的正式版，該版本實(shí)現(xiàn)了一次重大的升級(jí)，它讓仍在使用1.X版本的開發(fā)者將能夠更容易地過渡到Angular 2的開發(fā)2016-02-02
Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框示例代碼
這篇文章主要介紹了Angularjs實(shí)現(xiàn)帶查找篩選功能的select下拉框的詳細(xì)過程及示例代碼，文中通過示例介紹的很詳細(xì)，相信會(huì)對(duì)大家學(xué)習(xí)使用Angularjs具有一定的參考借鑒價(jià)值，有需要的朋友們可以一起來看看。2016-10-10
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05