Angular中的$watch方法詳解
在$apply方法中提到過臟檢查，首先apply方法會(huì)觸發(fā)evel方法，當(dāng)evel方法解析成功后，會(huì)去觸發(fā)digest方法，digest方法會(huì)觸發(fā)watch方法。
(1)$watch簡介
在digest執(zhí)行時(shí)，如果watch觀察的的value與上一次執(zhí)行時(shí)不一樣時(shí)，就會(huì)被觸發(fā)。
AngularJS內(nèi)部的watch實(shí)現(xiàn)了頁面隨model的及時(shí)更新。
$watch方法在用的時(shí)候主要是手動(dòng)的監(jiān)聽一個(gè)對(duì)象，但對(duì)象發(fā)生變化時(shí)觸發(fā)某個(gè)事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達(dá)式或函數(shù)的字符串
watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會(huì)被調(diào)用
deepWatch：可選的布爾值命令檢查被監(jiān)控的對(duì)象的每個(gè)屬性是否發(fā)生變化
$watch會(huì)返回一個(gè)函數(shù)，想要注銷這個(gè)watch可以使用函數(shù)
(3)例子
在前面的例子中，當(dāng)name的表單改變30次，然后觸發(fā)某個(gè)事件。
控制器代碼如下：
var firstController = function ($scope){
$scope.name='張三';
$scope.count=0;
// 監(jiān)聽一個(gè)model 當(dāng)一個(gè)model每次改變時(shí) 都會(huì)觸發(fā)第2個(gè)函數(shù)
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if($scope.count > 30){
$scope.name = '已經(jīng)大于30次了';
}
});
}
html代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-app="">
<div ng-controller="firstController">
<input type="text" value="" ng-model="name"/>
改變次數(shù):{{count}}-{{name}}
</div>
</div>
<script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>
運(yùn)行效果如下：
前30次可以隨意修改：
當(dāng)修改了30次后，name固定為'已經(jīng)大于30次了'：
這就是watch的作用，model每一次改變時(shí)都會(huì)觸發(fā)第二個(gè)函數(shù)。
(4)watch的第三個(gè)參數(shù)
當(dāng)監(jiān)聽的為一個(gè)對(duì)象或者數(shù)組時(shí)，例如：
$scope.data = {
name :'李四',
count:20
}
此時(shí)data里的name和count都要監(jiān)聽，那么可以這么寫：
$scope.$watch('data',function(){
},true)
如果不加第三個(gè)參數(shù)，那么只會(huì)監(jiān)聽data，只有當(dāng)data引用改變時(shí)才會(huì)觸發(fā)。
因此當(dāng)需要監(jiān)聽一些引用對(duì)象需要把第三個(gè)參數(shù)設(shè)置成true。
總結(jié)
以上所述是小編給大家介紹的Angular中的$watch方法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了Angular2 父子組件通信方式的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式，一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁，另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過示例代碼相信更能讓大家理解，有需要的朋友們下面來一起看看吧。2016-09-09
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的，當(dāng)使用ng-template定義好一個(gè)模板之后，可以用ng-container和templateOutlet指令來進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了angularJs的ng-class切換class,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
理解Angular的providers給Http添加默認(rèn)headers
本篇文章主要介紹了理解Angular的providers給Http添加默認(rèn)headers，具有一定的參考價(jià)值，有興趣的同學(xué)可以了解一下2017-07-07
Promise是一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve這幾個(gè)異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過實(shí)例代碼給大家講解angularjs promise 的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-03-03
angular2+node.js express打包部署的實(shí)戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07