Angular中的$watch方法詳解
在$apply方法中提到過臟檢查,首先apply方法會觸發(fā)evel方法,當evel方法解析成功后,會去觸發(fā)digest方法,digest方法會觸發(fā)watch方法。
(1)$watch簡介
在digest執(zhí)行時,如果watch觀察的的value與上一次執(zhí)行時不一樣時,就會被觸發(fā)。
AngularJS內(nèi)部的watch實現(xiàn)了頁面隨model的及時更新。
$watch方法在用的時候主要是手動的監(jiān)聽一個對象,但對象發(fā)生變化時觸發(fā)某個事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達式或函數(shù)的字符串
watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用
deepWatch:可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化
$watch會返回一個函數(shù),想要注銷這個watch可以使用函數(shù)
(3)例子
在前面的例子中,當name的表單改變30次,然后觸發(fā)某個事件。
控制器代碼如下:
var firstController = function ($scope){ $scope.name='張三'; $scope.count=0; // 監(jiān)聽一個model 當一個model每次改變時 都會觸發(fā)第2個函數(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>
運行效果如下:
前30次可以隨意修改:
當修改了30次后,name固定為'已經(jīng)大于30次了':
這就是watch的作用,model每一次改變時都會觸發(fā)第二個函數(shù)。
(4)watch的第三個參數(shù)
當監(jiān)聽的為一個對象或者數(shù)組時,例如:
$scope.data = { name :'李四', count:20 }
此時data里的name和count都要監(jiān)聽,那么可以這么寫:
$scope.$watch('data',function(){ },true)
如果不加第三個參數(shù),那么只會監(jiān)聽data,只有當data引用改變時才會觸發(fā)。
因此當需要監(jiān)聽一些引用對象需要把第三個參數(shù)設(shè)置成true。
總結(jié)
以上所述是小編給大家介紹的Angular中的$watch方法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子,通過示例代碼相信更能讓大家理解,有需要的朋友們下面來一起看看吧。2016-09-09Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的,當使用ng-template定義好一個模板之后,可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友參考下吧2018-08-08掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計模式優(yōu)化Angular應(yīng)用開發(fā)的技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10理解Angular的providers給Http添加默認headers
本篇文章主要介紹了理解Angular的providers給Http添加默認headers,具有一定的參考價值,有興趣的同學(xué)可以了解一下2017-07-07angular2+node.js express打包部署的實戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實戰(zhàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07