Angular Controller As Syntax-no method '$watchCollection'

Question

I am trying to do Controller As Syntax in Angular. At this point, I have it in my routerProvider...not sure if it would matter for the issue I am having, but here it is anyways:

 angular.module('ucp.kick', [
  'ngRoute'
])
.config ($routeProvider, APP_BASE_URL) ->
  $routeProvider
  .when APP_BASE_URL + 'kicks',
    name: 'Kicks'
    templateUrl: 'kick/partials/kick.html'
    controller: 'kick as KickController'

Here is a condensed version of my controller I have:

  this.$watchCollection('filtered.devices', function(devices) {
    return this.filteredDevices = devices;
  });

But I get:

TypeError: Object [object Object] has no method '$watchCollection'

I realize when using the controller as syntax, you do not want inject the scope. So, how do I access $watchCollection function?

dave · Accepted Answer · 2015-06-16 17:43:56Z

5

You will still need to inject $scope in order to use $watch and $watchCollection. Now, you would think you could do:

$scope.$watchCollection('filtered.devices', function (newVal, oldVal) {});

or

$scope.$watchCollection('this.filtered.devices', function (newVal, oldVal) {});

But that won't work. So you need to either do:

var that = this;
$scope.$watchCollection(function () {
    return that.filtered.devices;
}, function (newVal, oldVal) {

});

or:

$scope.$watchCollection(angular.bind(this, function () {
    return this.filtered.devices;
}), function (newVal, oldVal) {

});

or:

$scope.$watchCollection("KickController.filtered.devices", function(newVal, oldVal) { });

answered Jun 16, 2015 at 17:43

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dman Over a year ago

Fascinating! Never new about that

Explosion Pills · Accepted Answer · 2015-06-16 17:43:32Z

1

controller as does not replace the controller with $scope. Controllers don't have a $watchCollection property. You still have to inject $scope and use $scope.$watchCollection and you have to use the controller identifier as the name of the collection to watch

$scope.$watchCollection("KickController.filtered.devices"

That being said, using $watch and $watchCollection can usually be avoided and you can just work with the data bindings. Angular will use $watchCollection internally on the collection. Specifically I'm not sure that you need this other property filteredDevices when you can just use a filter explicitly on the existing collection.

answered Jun 16, 2015 at 17:43

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

Pytth · Accepted Answer · 2015-06-16 17:45:37Z

1

For watches, you still need to use $scope.

After injecting $scope into your controller, as you would have before the controllerAs syntax came about, you could do: $scope.$watchCollection(..)

To further iterate on what I mean: if the value you are trying to watch is bound to a value using the controllerAs syntax -- such as kickController.someValue then you would watch that value $scope.$watchCollection('kickController.someValue',...)

Sidenote: showing all of your code would help because it looks like you could have your controller definition backwards. Did you mean to do: ... controller: KickController as kick

and then:

var kick = this;

?

edited Jun 16, 2015 at 17:45

answered Jun 16, 2015 at 17:37

Pytth

4,1961 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular Controller As Syntax-no method '$watchCollection'

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related