Search code examples
angularjsangularjs-controllerasangularjs-components

Angularjs watch input binding change for Array when using ControllerAs

I have an AngularJs component having bindings to heroes, which is an array. How to watch this input for array changes? I tried $scope.watch("heroes", ...) and $onChanges, but didn't work so far.

bindings: {
    heroes: '<',
}

Here is my plunker: https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview

Solution

  • The ControllerAs structure needs a special watch expression, since the attributes are not on the $scope.

    //This one works and is the best one (> AngularJs 1.5)
$scope.$watch("$ctrl.heroes.length", function () {
  console.log("ControllerAs syntax"); // Triggers once on init
});

//This one works as well
var ctrl = this;
$scope.$watch(() => {
  return ctrl.heroes.length;
}, (value) => {
  console.log("complex watch"); // Triggers once on init
});

    See example here: https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview