可能很多剛入行或者剛學習的前端對於AngularJs中的一些事件或者概念感覺不理解或者沒有思路,今天讓我們一起來剖析一下AngularJs中的一些事件。
AngularJs中對於的監聽事件會用到一個scope函數$watch,它包含了三個參數,首先我們在概念上來了解一下：
$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。
$watch(watchExpression, listener, objectEquality);
每個參數的說明如下：
watchExpression（必須）：監聽的對象，它可以是一個string，將被計算為表達式 ,或函數如function(){return $scope.name}。
listener:當watchExpression（監聽對象）變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(作用域的引用)
objectEquality：是否深度監聽，如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它。
我寫了一個小例子，可能會讓大家更好的了解監聽模型變化的過程,以下部分是html代碼：
<!doctype html> <html ng-app="exampleApp"> <head> <meta charset="utf-8"> <title></title> <link href="../css/bootstrap.css" rel="stylesheet"> //導入了本地bootstrap的框架 </head> <body ng-controller = "simpleCtrl"> <div class="container"> <div class="well"> <div class="form-group"> <input class="form-control" ng-model="name" type="text"> </div> </div> </div> </body> </html>
然后導入本地的AngularJs框架的文件，javaScript代碼如下：
<script src="../angular.min.js"></script> //導入本地AngularJs文件
<script>
angular.module("exampleApp", [])
.controller("simpleCtrl", function ($scope, $rootScope) {
$scope.count = 0;
$scope.name = '';
$scope.$watch('name', function(){ //監聽數據模型發生的變化
console.log($scope.count++);
});
});
</script>
代碼運行后的結果為
當用戶與輸入框中的內容發生交互事件時監聽事件被觸發（無論是增加還是刪除）,運行結果如下：
接下來為大家分享下臟循環，Angular會運行一個函數$digest來檢查scope模型中的數據是否發生了變化。 在$digest循環中，watchers會被觸發。當一個watcher被觸發時，AngularJS會檢測它所監聽的scope模型，如果監聽對象發生了變化那么關聯到該watcher的回調函數就會被調用。 這種方法叫做臟檢查。
在angular程序初始化時，會將綁定對象的屬性添加為監聽對象（watcher），也就是說一個$scope對象綁定了N個屬性，就會添加N個watcher。 angular什么時候去臟檢查呢？angular所定義的方法中都會觸發$digest事件，比如：controller初始化的時候，所有以ng-開頭的指令執行后，都會觸發臟檢查 用戶與視圖發生交互行為以后會觸發臟檢查。
調用$digest方法： $scope.$digest();
但是這里就又要牽扯到另一個函數，因為AngularJS並不直接調用$digest()，而是調用$scope.$apply()，$apply方法就是將$digest方法包裝了一層，會調用$rootScope.$digest()。因此，一輪$digest循環在$rootScope開始，隨后會訪問到所有的children scope中的watchers。 $apply()方法接受一個可選參數，可以是string，string將被看作表達式並計算結果，也可以是函數。
當接受function作為參數，會執行該function並且觸發一輪$digest循環。 不接受任何參數，觸發一輪$digest循環會，檢查該$scope里的所有監聽的屬性。 如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通過手動調用$apply()來通知AngularJS。
這里有個小例子效果圖如下：
因為這里設置了延時觸發，所以一段時間過后：
下面是實現代碼部分，html代碼如下：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-controller="MesCtrl"> {{message}} </body> </html>
javaScript代碼如下：
<script src="angular.min.js"></script> <script> angular.module("myApp",[]).controller("MesCtrl", function ($scope) { $scope.message = "原來的信息"; $scope.getMessage = function(){ setTimeout(function(){ $scope.$apply(function(){ $scope.message = "兩秒鍾之后更新"; console.log('message:' +$scope.message); // $scope.$apply(); 第二種調用方法 }) },2000) } $scope.getMessage(); }); </script>
以上就是我所理解的AngularJs中的部分內容，希望大家有什么質疑或見解可以放在評論欄，大家吃好喝好，回見。