Question

我正在使用$ watchCollection来监视数组长度的变化。但是当我在数组中添加任何项目时它似乎不起作用。我哪里错了？

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.count;
  $scope.Items = {
      "Cars" : [
          {
              "id" : 1,
              "name" : "Mercedes"
          },
          {
              "id": 2,
              "name" : "Ferrari"
          }

      ],
      "Bikes" : [
           {
              "id" : 1,
              "name" : "Ducati"
          },
          {
              "id": 2,
              "name" : "Yamaha"
          } 

      ]
  }

  $scope.addCar = function() {
    $scope.Items.Cars.push({
        'id' : 3,
        "name" : "random name"
    })
  }

  $scope.$watchCollection($scope.Items.Cars, function(newNames, oldNames) {
    $scope.count = $scope.Items.Cars.length;
    console.log($scope.count);
  })

});

演示：http://plnkr.co/edit/dSloJazZgr3mMevIHOe8?p=preview

Answer 1

您应该将表达式作为第一个变量传递给$watchCollection，而不是对象：

$scope.$watchCollection('Items.Cars', function(newNames, oldNames) {
  $scope.count = $scope.Items.Cars.length;
  console.log($scope.count);
})

plnkr example

Answer 2

我有一个不同的问题。请考虑以下事项：

app.controller('MainCtrl', function($scope) {
  unwatch = $scope.$watch('variableName', function() {
    [...];
  },true);
  setInterval(function() {
    $scope.variable++;
    $scope.$apply();
  }, 1000);
});

我有另一个控制器

app.controller('RelatedCtrl', function($scope) {
  unwatch = $scope.$watch('totallyUnrelated', function() {
    [...];
  },true);
});

问题在于作业unwatch = [...];与window.unwatch = [...];

相同

因此，当另一个控制器决定取消监视时，它实际上是在不同范围内取消观察者......

解决方案

使用var unwatch = [...];使变量局部变为当前函数作用域（js作用域，而不是角度作用域）。

e.g。

app.controller('MainCtrl', function($scope) {
  var unwatch = $scope.$watch('variableName', function() {
    [...];
  },true);
  setInterval(function() {
    $scope.variable++;
    $scope.$apply();
  }, 1000);
});

$ watchCollection不在数组上工作

2 个答案:

解决方案