angular $scope.$watch 数组调用更新函数
angular $scope.$watch on array calling update function
在 my plunk 中,我有一个整数数组,我附加了 $scope.$watch。当我更新数组时,我的 $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>
将您的代码更改为
$scope.$watch('MyArray' , function(){
console.log($scope.MyArray);
}, true)
查看 documentation,您会看到第三个参数表示 $watch 方法将使用对象相等性来确定您的数组是否已更改。表示angular会使用支持数组比较的angular.equals
方法,例如
您可以使用 $watchCollection
,只需在 $watch
函数中提供 true
选项,它会比 deep watcher 更便宜。
$scope.$watchCollection('MyArray' , function(){
console.log($scope.MyArray);
})
$watchCollection()
深入一层并对集合中的顶级项目执行额外的浅层引用检查。
如果你有一个非常大的阵列,你想在其上进行观察,那么不要选择 $watch
和 true
(深度观察者)。对于 1000
/2000
记录,您会感到 angular 绑定滞后。因此,首选方法是尽可能避免 watcher
或 只是选择 $watchCollection
在 my plunk 中,我有一个整数数组,我附加了 $scope.$watch。当我更新数组时,我的 $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>
将您的代码更改为
$scope.$watch('MyArray' , function(){
console.log($scope.MyArray);
}, true)
查看 documentation,您会看到第三个参数表示 $watch 方法将使用对象相等性来确定您的数组是否已更改。表示angular会使用支持数组比较的angular.equals
方法,例如
您可以使用 $watchCollection
,只需在 $watch
函数中提供 true
选项,它会比 deep watcher 更便宜。
$scope.$watchCollection('MyArray' , function(){
console.log($scope.MyArray);
})
$watchCollection()
深入一层并对集合中的顶级项目执行额外的浅层引用检查。
如果你有一个非常大的阵列,你想在其上进行观察,那么不要选择 $watch
和 true
(深度观察者)。对于 1000
/2000
记录,您会感到 angular 绑定滞后。因此,首选方法是尽可能避免 watcher
或 只是选择 $watchCollection