本文實(shí)例講述了AngularJS中watch監(jiān)聽用法。分享給大家供大家參考，具體如下：
ANGULAR 監(jiān)聽使用：
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。
$watch是一個(gè)scope函數(shù)，用于監(jiān)聽模型變化，當(dāng)你的模型部分發(fā)生變化時(shí)它會(huì)通知你。
$watch(watchExpression, listener, objectEquality);
| watchExpression | 需要監(jiān)控的表達(dá)式 |
| listener | 處理函數(shù)，函數(shù)參數(shù)如下 function(newValue,oldValue, scope) |
| objectEquality | 是否深度監(jiān)聽，如果設(shè)置為true,它告訴Angular檢查所監(jiān)控的對(duì)象中每一個(gè)屬性的變化. 如果你希望監(jiān)控?cái)?shù)組的個(gè)別元素或者對(duì)象的屬性而不是一個(gè)普通的值, 那么你應(yīng)該使用它 |
<!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title>Insert title here</title></head><script src="assets/angular.min.js"></script><script src="assets/js/jquery.min.js"></script><script type="text/javascript">var app=angular.module("app",[]);app.controller('MainCtrl', function($scope) { $scope.name = "Angular"; $scope.updated = -1; $scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } // AKA first run $scope.updated++; }); var i=0; $scope.getScope=function(){ // console.info(this); var obj=$("#btnTest"); i++; angular.element( obj).scope().name="hello" +i; } });</script><body ng-controller="MainCtrl"> <input ng-model="name" /> Name updated: {{updated}} times. <button id="btnTest" ng-click="getScope()">獲取scope</button></body></html>此代碼監(jiān)控$scope的name值的變化，如果發(fā)生變化則觸發(fā)監(jiān)聽。
監(jiān)控對(duì)象：
<!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title>Insert title here</title></head><script src="assets/angular.min.js"></script><script src="assets/js/jquery.min.js"></script><script type="text/javascript">var app=angular.module("app",[]);app.controller('MainCtrl', function($scope) { $scope.user = { name: "Fox" }; $scope.updated = -1; var watch=$scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; $scope.$broadcast('userUpdate', newValue.name); }); //watch(); var i=0; $scope.$on('userUpdate',function(d,data){ console.info(data); }) $scope.getScope=function(){ // console.info(this); var obj=$("#btnTest"); i++; angular.element( obj).scope().user.name="hello" +i; } });</script><body ng-controller="MainCtrl"> <input ng-model="user.name" /> Name updated: {{updated}} times. <button id="btnTest" ng-click="getScope()">獲取scope</button></body></html>這里我們點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)監(jiān)控并不會(huì)觸發(fā)，原因是我們監(jiān)控了user對(duì)象，這個(gè)user對(duì)象沒喲發(fā)生變化，只不過屬性值發(fā)生了變化。
如果我們希望監(jiān)控user對(duì)象屬性發(fā)生變化，有兩個(gè)做法。
1.使用深度監(jiān)控。
方法如下：
<!DOCTYPE html><html ng-app="app"><head><meta charset="UTF-8"><title>Insert title here</title></head><script src="assets/angular.min.js"></script><script src="assets/js/jquery.min.js"></script><script type="text/javascript">var app=angular.module("app",[]);app.controller('MainCtrl', function($scope) { $scope.user = { name: "Fox" }; $scope.updated = -1; var watch=$scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; $scope.$broadcast('userUpdate', newValue.name); },true); //watch(); var i=0; $scope.$on('userUpdate',function(d,data){ console.info(data); }) $scope.getScope=function(){ // console.info(this); var obj=$("#btnTest"); i++; angular.element( obj).scope().user.name="hello" +i; } });</script><body ng-controller="MainCtrl"> <input ng-model="user.name" /> Name updated: {{updated}} times. <button id="btnTest" ng-click="getScope()">獲取scope</button></body></html>設(shè)置為深度監(jiān)控，只要對(duì)象發(fā)生變化，那么監(jiān)聽就會(huì)觸發(fā)。
2.直接寫對(duì)象的屬性值路徑。
var watch=$scope.$watch('user.name', function(newValue, oldValue) {//具體代碼就不全部寫了。消除監(jiān)聽
系統(tǒng)中太多的監(jiān)聽會(huì)影響系統(tǒng)的性能，我們可以在滿足某些條件后，去掉監(jiān)聽。
去掉監(jiān)聽方法如下：
var watch=$scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; $scope.$broadcast('userUpdate', newValue.name); },true);//去掉監(jiān)聽。watch();在系統(tǒng)中使用事件廣播。
比如在監(jiān)聽時(shí)，我們對(duì)外廣播一個(gè)事件，
在控制其中寫監(jiān)聽的處理方法：
實(shí)例如下：
$scope.$broadcast('userUpdate', newValue.name);監(jiān)聽代碼：
$scope.$on('userUpdate',function(d,data){ console.info(data);})這種做法最好使用在指令中，指令中廣播事件，在控制器中實(shí)現(xiàn)監(jiān)聽。好處在于實(shí)現(xiàn)代碼的重用。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
