引言
最近在項目中封裝控件的時候用到了$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="李四"這句代碼寫在s
etTimeout函數中,界面上顯示的值根本就不會改變。
$watch方法監聽module變化
當你的數據模型中某一部分發生變化時,$watch 函數可以向你發出通知。你可以監控單個對象的屬性,也可以
監控需要經過計算的結果(函數),實際上只要能夠被當作屬性訪問到,或者可以當作一個JavaScript 函數被計算
出來,就可以被$watch 函數監控。它的函數簽名爲:
<span style="font-family:SimSun;"> $watch(watchFn, watchAction, deepWatch)</span>
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