Angularjs: 'controller as syntax' and $watch

Question

How to subscribe on property change when using controller as syntax?

controller(\'TestCtrl\', function ($         


        

Answer 1

Writing a $watch in ES6 syntax wasn't as easy as I expected. Here's what you can do:

// Assuming
// controllerAs: "ctrl"
// or
// ng-controller="MyCtrl as ctrl"
export class MyCtrl {
  constructor ($scope) {
    'ngInject';
    this.foo = 10;
    // Option 1
    $scope.$watch('ctrl.foo', this.watchChanges());
    // Option 2
    $scope.$watch(() => this.foo, this.watchChanges());
  }

  watchChanges() {
    return (newValue, oldValue) => {
      console.log('new', newValue);
    }
  }
}