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);
})
這種做法最好使用在指令中，指令中廣播事件，在控制器中實現監聽。好處在於實現代碼的重用。