在my plunk我有一个整数数组,我附加了$ scope。$ watch to。当我更新数组时,我的$ scope。$ watch没有触发console.log。为什么我的console.log没有被调用?
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="test" ng-controller="testArray">
<div ng-repeat="item in MyArray track by $index"> {{item}}</div>
<button ng-click="add()">testing Add</button>
</body>
</html>
<script type="text/javascript">
'use strict';
var app = angular.module('test', []);
app.controller('testArray',['$scope',function($scope){
$scope.MyArray = [1,2,3,4]
$scope.add = function(){
$scope.MyArray.push($scope.MyArray.length+1);
}
$scope.$watch('MyArray' , function(){
console.log($scope.MyArray);
})
}]);
</script>
答案 0 :(得分:4)
将您的代码更改为
$scope.$watch('MyArray' , function(){
console.log($scope.MyArray);
}, true)
查看documentation,您将看到第三个参数表明$ watch方法将使用对象相等来确定您的数组是否已更改。这意味着angular将使用支持数组比较的angular.equals
方法,例如
答案 1 :(得分:2)
您可以使用$watchCollection
,只需在true
函数中提供$watch
选项,就可以比深度观察者便宜。
$scope.$watchCollection('MyArray' , function(){
console.log($scope.MyArray);
})
$watchCollection()
深入一级,并对集合中的顶级项目执行额外的浅层参考检查。
如果你有一个非常大的数组,你想继续观看,那么不要使用$watch
(深度观察者)去true
。对于1000
/ 2000
条记录,您会感到角度绑定滞后。因此,首选方法是尽可能避免watcher
或只需$watchCollection