Angular.js中使用$watch監聽模型變化
$watch簡單使用
$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。
$watch(watchExpression, listener, objectEquality);
每個參數的說明如下：
-
watchExpression：監聽的對象，它可以是一個angular表達式如‘name‘,或函數如function(){return $scope.name}。
-
listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(作用域的引用)
-
objectEquality：是否深度監聽，如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麽你應該使用它
例如：監聽一個json 中的所有屬性的變化
$scope.cartList=[
{id:1000,name:"iphone5s",quantity:3,price:4300},
{id:1001,name:"iphone5",quantity:30,price:3300},
{id:1002,name:"imac",quantity:3,price:3000},
{id:1003,name:"ipad",quantity:5,price:6900}
];
var watch = $scope.$watch(‘cartList‘,function(newValue,oldValue, scope){
console.log(newValue);
console.log(oldValue);
},true);
舉個栗子：
$scope.name = ‘hello‘;
var watch = $scope.$watch(‘name‘,function(newValue,oldValue, scope){
console.log(newValue);
console.log(oldValue);
});
$timeout(function(){
$scope.name = "world";
},1000);
$watch性能問題
太多的$watch將會導致性能問題，$watch如果不再使用，我們最好將其釋放掉。
$watch函數返回一個註銷監聽的函數，如果我們想監控一個屬性，然後在稍後註銷它，可以使用下面的方式：
var watch = $scope.$watch(‘someModel.someProperty‘, callback);
//...
watch();
還有2個和$watch相關的函數：
$watchGroup(watchExpressions, listener);
$watchCollection(obj, listener);
Angular.js中使用$watch監聽模型變化