angular $ scope。$ watch on array calls update function

时间:2016-04-13 20:53:36

标签: javascript arrays angularjs angularjs-scope angularjs-watch

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>

2 个答案:

答案 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