AngularJS中watch監聽用法分析

AngularJS中watch監聽用法分析_AngularJS

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了AngularJS中watch監聽用法。分享給大家供大家參考，具體如下：

ANGULAR 監聽使用：

當angular資料模型發生變化時，我們需要如果需要根據他的變化觸發其他的事件。

$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。

$watch(watchExpression, listener, objectEquality);

watchExpression	需要監控的運算式
listener	處理函數，函數參數如下 function(newValue,oldValue, scope)
objectEquality	是否深度監聽，如果設定為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它

<!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>

此代碼監控$scope的name值的變化，如果發生變化則觸發監聽。

監控對象：

<!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>

這裡我們點擊按鈕會發現監控並不會觸發，原因是我們監控了user對象，這個user對象沒喲發生變化，只不過屬性值發生了變化。

如果我們希望監控user對象屬性發生變化，有兩個做法。

1.使用深度監控。

方法如下：

<!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>

設定為深度監控，只要對象發生變化，那麼監聽就會觸發。

2.直接寫對象的屬性值路徑。

var watch=$scope.$watch('user.name', function(newValue, oldValue) {//具體代碼就不全部寫了。

消除監聽

系統中太多的監聽會影響系統的效能，我們可以在滿足某些條件後，去掉監聽。

去掉監聽方法如下：

var watch=$scope.$watch('user', function(newValue, oldValue) {  if (newValue === oldValue) { return; }  $scope.updated++;  $scope.$broadcast('userUpdate', newValue.name);  },true);//去掉監聽。watch();

在系統中使用事件廣播。

比如在監聽時，我們對外廣播一個事件，

在控制其中寫監聽的處理方法：

執行個體如下：

$scope.$broadcast('userUpdate', newValue.name);

監聽代碼：

$scope.$on('userUpdate',function(d,data){ console.info(data);})

這種做法最好使用在指令中，指令中廣播事件，在控制器中實現監聽。好處在於實現代碼的重用。

希望本文所述對大家AngularJS程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More