本文執行個體總結了AngularJS中$apply方法和$watch方法用法。分享給大家供大家參考，具體如下：
引言
最近在項目中封裝控制項的時候用到了$watch方法來監聽module中的值的變化，當時小編對這個方法不是很瞭解，所以在網上找了一些資料來學習一下，下面小編就給大家簡單介紹一些AngularJS中Scope 提供$apply 方法傳播Model 的變化和$watch方法監聽module變化。
$apply使用情景
AngularJS 外部的控制器（DOM 事件、外部的回呼函數如 jQuery UI 空間等）調用了AngularJS 函數之後，必須調用$apply。在這種情況下，你需要命令 AngularJS 重新整理自已（模型、視圖等），$apply就是用來做這件事情的。我們在使用$apply這個方法的時候，只要可以，請把要執行的代碼和函數傳遞給$apply 去執行，而不要自已執行那些函數然後再調用$apply。
下面看一個Demo，寫一個定時器在兩秒以後改變name的值：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script src="serviceJS01.js"></script></head><body ng-app="myApp" ><div ng-controller="firstController" ng-click="show()">{{name}} {{age}}</div></body></html><script> var app = angular.module("myApp",[]); app.controller('firstController',function($scope,$timeout){ setTimeout(function(){ $scope.$apply(function(){ $scope.name="李四"; }) },2000); $scope.name="張三"; $scope.age='10'; $scope.show=function(){ $scope.name='點擊後的name'; } $timeout(function(){ $scope.age='50'; },2000); })</script>
在上面代碼中如果我們不使用$apply來傳播name值的改變，而是直接將$scope.name="李四"這句代碼寫在setTimeout函數中，介面上顯示的值根本就不會改變。
$watch方法監聽module變化
當你的資料模型中某一部分發生變化時，$watch 函數可以向你發出通知。你可以監控單個對象的屬性，也可以監控需要經過計算的結果（函數），實際上只要能夠被當作屬性訪問到，或者可以當作一個JavaScript 函數被計算出來，就可以被$watch 函數監控。它的函數簽名為:
$watch(watchFn, watchAction, deepWatch)
watchFn參數：這個是我們監聽地方目標對象，它是一個帶有angular運算式或者函數的字串；
watchAction參數：這是一個函數或者運算式，當watchFn 發生變化時會被調用。如果是函數的形式，它將會接收到watchFn 的新舊兩個值，以及範圍對象的引用。其函數簽名為function(newValue, oldValue, scope)。
deepWatch參數：如果設定為true，這個可選的布爾型參數將會命令Angular 去檢查被監控對象的每個屬性是否發生了變化。如果你想要監控數組中的元素，或者對象上的所有屬性，而不只是監控一個簡單的值，你就可以使用這個參數。
下面看一個Demo，當費用超過100的時候，運費為0否則運費為10：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script src="serviceJS01.js"></script></head><body ng-app="myApp" ><div ng-controller="firstController" ng-click="show()"> <p>價格：<input type="text" ng-model="iphone.money"></p> <p>個數：<input type="text" ng-model="iphone.num"></p> <p>費用： <span>{{sum() | currency:'￥'}}</span></p> <p>運費： <span>{{iphone.fre | currency:'￥'}}</span></p> <p>總額： <span>{{sum() + iphone.fre | currency:'￥'}}</span></p></div></body></html><script> var app = angular.module("myApp",[]); app.controller('firstController',function($scope){ $scope.iphone={ money:5, num:1, fre:10 }; $scope.sum=function(){ return $scope.iphone.money * $scope.iphone.num; } $scope.$watch($scope.sum,function(newValue,oldValue){ $scope.iphone.fre=newValue>=100?0:10 }) })</script>
$watch這個函數在項目中會經常用到，所以我們需要對這個函數靈活的掌握，這樣我們在自定控制項或者完成一些比較複雜的需求的時候很更加的方便。
小結
以上是小編對中兩個方法的總結，這些都是比較入門的知識，如果想更好的對這些知識瞭解還需要我們在項目中好好的研究。
源碼地址：http://runjs.cn/code/ovjwuxhn
更多關於AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
