AngularJs作用域高級特性，作用域?qū)傩员O(jiān)視烤惊、digest循環(huán)等
基于AngularJS入門與進(jìn)階（江榮波 著）這本書的筆記
AngularJS 1.x的demo
AngularJS1.x和Angular2,4,5是不一樣的兩個東西乔煞，構(gòu)建方式，語法柒室，都很多不同
$watch方法監(jiān)視作用域
在傳統(tǒng)的JavaScript中如果要監(jiān)視一個方法是比較繁瑣的事情渡贾，不過在AngularJs中可以使用$watch 對對像進(jìn)行手工監(jiān)視，讓對像發(fā)生變化的時候觸發(fā)
$watch(watchFn,watchAction,deepWatch)
- watchFn:angular表達(dá)式或函數(shù)的字符串
- watchAction(newValue,oldValue,scope):watchFn發(fā)生變化會被調(diào)用
- deepWatch:可選的布爾值命令檢查被監(jiān)控的對象的每個屬性是否發(fā)生變化
示例代碼
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("scopeController",function ($scope,$log) {
$scope.changeNum = 0;
$scope.$watch('userName',function (newValue,oldValue) {
++$scope.changeNum;
console.log("newValue:" + newValue + " " + "oldValue:" + oldValue + " " + "changeNum:" + $scope.changeNum);
});
});
</script>
</head>
<body >
<div ng-controller="scopeController">
<input ng-model="userName" type="text">
<span>改變次數(shù):{{changeNum}}</span>
</div>
</body>
</html>
控制臺輸出
newValue:undefined oldValue:undefined changeNum:1
newValue:2 oldValue:undefined changeNum:2
newValue:23 oldValue:2 changeNum:3
newValue:231 oldValue:23 changeNum:4
newValue:2314 oldValue:231 changeNum:5
從控制臺輸出可以看出雄右，才進(jìn)去的時候新的值和舊的值都是未定義空骚，改變次數(shù)為1，當(dāng)在文本框錄入一次值后擂仍，新的值變?yōu)?囤屹，舊值是未定義，改變次數(shù)為2逢渔，再次輸入新值變?yōu)?3肋坚，舊值變?yōu)?，改變次數(shù)為3肃廓。通過這個方法我們能很簡便的監(jiān)控某些特定的值或者字段智厌。
需要注意的是，示例代碼中$watch只用了兩個參數(shù)盲赊，如果不定義第三個參數(shù)铣鹏，默認(rèn)為false，不會監(jiān)控引用數(shù)據(jù)類型例如數(shù)組等類型的變化哀蘑。如果需要監(jiān)控引用數(shù)據(jù)類型诚卸，需要顯式定義為true，就可以實現(xiàn)監(jiān)控递礼。
在angular 1.1.4版本之后惨险，新增加了一個$watchCollection()方法來針對數(shù)組（也就是集合）進(jìn)行監(jiān)視，它的性能介于全等監(jiān)視和引用監(jiān)視之間脊髓，即它并不會對數(shù)組中每一項的屬性進(jìn)行監(jiān)視辫愉，但是可以對數(shù)組的項目增減做出反應(yīng)。
對于多個變量的監(jiān)視變化将硝，執(zhí)行同一函數(shù)的話恭朗，可以將這幾個變量轉(zhuǎn)為字符串，以‘+’號隔開來進(jìn)行監(jiān)視
$scope.$watch('count + page',function(){
...
});
作用域監(jiān)視解除
如果在某種特定的條件下需要解除監(jiān)視依疼，可以調(diào)用unbindWatcher();方法
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("scopeController",function ($scope,$log) {
$scope.changeNum = 0;
// $watch 回調(diào)函數(shù)可以解除監(jiān)視
var unbindWatcher = $scope.$watch('userName',function (newValue,oldValue) {
++$scope.changeNum;
console.log("newValue:" + newValue + " " + "oldValue:" + oldValue + " " + "changeNum:" + $scope.changeNum);
if($scope.changeNum == 3){
unbindWatcher();
}
});
});
示例代碼樣式在改變次數(shù)到3后痰腮，就不會再出發(fā)watch方法了
newValue:undefined oldValue:undefined changeNum:1
newValue:2 oldValue:undefined changeNum:2
newValue:22 oldValue:2 changeNum:3
$apply與$digest
在AngularJS作用域中的數(shù)據(jù)發(fā)生變化時，會自動觸發(fā)apply
來觸發(fā) $digest`歌逢。
示例代碼，就是書中的代碼翘狱，使用setTimeout的JS觸發(fā)秘案，可以發(fā)現(xiàn)控制臺輸出了改變的值，但是視圖中沒有改變
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("scopeController",function ($scope,$log) {
$scope.userName = '初始姓名';
console.log("姓名" + $scope.userName);
$scope.clickTest = function () {
// js 延時觸發(fā)
setTimeout(function () {
$scope.userName = '改變姓名';
console.log("改變姓名" + $scope.userName);
},1000);
}
});
</script>
</head>
<body >
<div ng-controller="scopeController">
<input value="點擊測試" type="button" ng-click="clickTest()"><br/>
<span>姓名:{{userName}}</span>
</div>
</body>
</html>
代碼修改一下潦匈，能成功觸發(fā)
$scope.clickTest = function () {
// js 延時觸發(fā)
setTimeout(function () {
// 使用apply手工觸發(fā)digest
$scope.$apply(function () {
$scope.userName = '改變姓名';
console.log("改變姓名" + $scope.userName);
});
},1000);
}
$timeout與$interval服務(wù)介紹
JavaScript的setTimeout()方法達(dá)到延遲執(zhí)行某個方法的效果阱高。還有一個的方法setInterval()，作用是每隔一段時間調(diào)用一次方法茬缩。兩個方法都需要我們手動調(diào)用$apply()方法來觸發(fā)$digest循環(huán)赤惊。
，AngularJS中有對應(yīng)的$timeout和$interval寒屯，不需要我們手動調(diào)用digest循環(huán)荐捻。
