javascript - AngularJS: $watchCollection does not work; throws error - Stack Overflow

admin管理员组

文章数量:1026380

I've got a problem in AngularJS where $scope.$watchCollection() throws an error. I've reduced my code to the point where it's exactly the same as example code in the docs (.$rootScope.Scope#$watchCollection), and the error is still thrown:

function OverviewCtrl($scope) {
  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
    $scope.dataCount = newNames.length;
  });
}

I get the error

'undefined' is not a function (evaluating '$scope.$watchCollection('names', function(newNames, oldNames) {
  $scope.dataCount = newNames.length;
})')

I have no idea what the problem could possibly be. I'm doing exactly what the docs say, except I'm putting it in a controller, but it seems this code is intended for use in controllers. So what's the problem here?

I've got a problem in AngularJS where $scope.$watchCollection() throws an error. I've reduced my code to the point where it's exactly the same as example code in the docs (http://docs.angularjs/api/ng.$rootScope.Scope#$watchCollection), and the error is still thrown:

function OverviewCtrl($scope) {
  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
    $scope.dataCount = newNames.length;
  });
}

I get the error

'undefined' is not a function (evaluating '$scope.$watchCollection('names', function(newNames, oldNames) {
  $scope.dataCount = newNames.length;
})')

I have no idea what the problem could possibly be. I'm doing exactly what the docs say, except I'm putting it in a controller, but it seems this code is intended for use in controllers. So what's the problem here?

• javascript
• angularjs

Share Improve this question Follow asked Oct 4, 2013 at 10:12 mcvmcv 4,45966 gold badges3737 silver badges4141 bronze badges 8

• 1 What version of angular are you using? $watchCollection is a fairly new feature. – Jussi Kosunen Commented Oct 4, 2013 at 10:16
• 1.0.6. The latest stable version seems to be 1.0.8. – mcv Commented Oct 4, 2013 at 10:17
• upgrading to 1.2.0-rc2 seems to do the trick. Also had to explicitly include routeProvider to get the app working. (I wonder if that means I can drop routeProvider pletely; I don't really want my views directly tied to urls.) – mcv Commented Oct 4, 2013 at 10:32
• Yeah $watchCollection isn't in the stable builds (you can specify your version in the API documentation in the top left to see what you can use). Not sure about your routeProvider woes, though. – Jussi Kosunen Commented Oct 4, 2013 at 10:34
• 1 Not the best place for this, but just a note on routes. You can only have one ng-view, which is why I skipped routeProvider and just use ng-includes. – Jussi Kosunen Commented Oct 4, 2013 at 11:45

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 5

You could also use the following syntax :

$scope.$watch('myCollection', function(value, oldValue) {
    // insert awesome code here
}, true);

The true parameter tells AngularJS to "deepwatch" the value.

I've got a problem in AngularJS where $scope.$watchCollection() throws an error. I've reduced my code to the point where it's exactly the same as example code in the docs (.$rootScope.Scope#$watchCollection), and the error is still thrown:

function OverviewCtrl($scope) {
  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
    $scope.dataCount = newNames.length;
  });
}

I get the error

'undefined' is not a function (evaluating '$scope.$watchCollection('names', function(newNames, oldNames) {
  $scope.dataCount = newNames.length;
})')

I have no idea what the problem could possibly be. I'm doing exactly what the docs say, except I'm putting it in a controller, but it seems this code is intended for use in controllers. So what's the problem here?

I've got a problem in AngularJS where $scope.$watchCollection() throws an error. I've reduced my code to the point where it's exactly the same as example code in the docs (http://docs.angularjs/api/ng.$rootScope.Scope#$watchCollection), and the error is still thrown:

function OverviewCtrl($scope) {
  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
    $scope.dataCount = newNames.length;
  });
}

I get the error

'undefined' is not a function (evaluating '$scope.$watchCollection('names', function(newNames, oldNames) {
  $scope.dataCount = newNames.length;
})')

I have no idea what the problem could possibly be. I'm doing exactly what the docs say, except I'm putting it in a controller, but it seems this code is intended for use in controllers. So what's the problem here?

• javascript
• angularjs

Share Improve this question Follow asked Oct 4, 2013 at 10:12 mcvmcv 4,45966 gold badges3737 silver badges4141 bronze badges 8

• 1 What version of angular are you using? $watchCollection is a fairly new feature. – Jussi Kosunen Commented Oct 4, 2013 at 10:16
• 1.0.6. The latest stable version seems to be 1.0.8. – mcv Commented Oct 4, 2013 at 10:17
• upgrading to 1.2.0-rc2 seems to do the trick. Also had to explicitly include routeProvider to get the app working. (I wonder if that means I can drop routeProvider pletely; I don't really want my views directly tied to urls.) – mcv Commented Oct 4, 2013 at 10:32
• Yeah $watchCollection isn't in the stable builds (you can specify your version in the API documentation in the top left to see what you can use). Not sure about your routeProvider woes, though. – Jussi Kosunen Commented Oct 4, 2013 at 10:34
• 1 Not the best place for this, but just a note on routes. You can only have one ng-view, which is why I skipped routeProvider and just use ng-includes. – Jussi Kosunen Commented Oct 4, 2013 at 11:45

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 5

You could also use the following syntax :

$scope.$watch('myCollection', function(value, oldValue) {
    // insert awesome code here
}, true);

The true parameter tells AngularJS to "deepwatch" the value.

本文标签： javascriptAngularJS watchCollection does not work throws errorStack Overflow