CODEWITHSUNDEEP
javascriptangularjsangularjs-controller
Michael Witt
Michael Witt

Reputation: 1712

Using controllerAs syntax in Angular, how can I watch a variable?

With standard controller syntax in AngularJS, you can watch a variable like:

$scope.$watch(somethingToWatch, function() { alert('It changed!'); });

Using the controllerAs syntax, I want to react to this change in an active controller. What's the easiest way to do this?

More detail, if it helps. I have one controller in a side pane that controls the context of the application (user selection, start time, end time, etc.). So, if the user changes to a different context, the main view should react and update. I'm storing the context values in a factory and each controller is injecting that factory.

Upvotes: 3

Views: 924

Answers (1)

PSL
PSL

Reputation: 123739

You can always use a watcher evaluator function, especially helpful to watch something on the controller instance or any object. You can actually return any variable for that matter.

  var vm = this;
  //Where vm is the cached controller instance.
  $scope.$watch(function(){
     return vm.propToWatch;
  }, function() { 
      //Do something
  }, true);//<-- turn on this if needed for deep watch

And there are also ways to use bound function to bind the this context.

$scope.$watch(angular.bind(this, function(){
     return this.propToWatch;
    //For a variable just return the variable here
 }), listenerFn);

or even ES5 function.bind:

 $scope.$watch((function(){
     return this.propToWatch;
 }).bind(this), listenerFn);

If you are in typescript world it gets more shorter.

$scope.$watch(()=> this.propToWatch, listenerFn);

Eventhough you can watch on the controller alias inside the controller ($scope.watch('ctrlAs.someProp'), it opens up couple of problems:

  • It predicts (or in other words pre-determines) the alias used for the controller in the view/route/directive/modal or anywhere the controller is used. It destroys the purpose of using controllerAs:'anyVMAlias' which is an important factor in readability too. It is easy to make typo and mistakes and maintenance headache too since using the controller you would need to know what name is defined inside the implementation.

  • When you unit test the controller (just the controller), you need to again test with the exact same alias defined inside the controller (Which can probably arguably an extra step if you are writing TDD), ideally should not need to when you test a controller.

  • Using a watcher providing watcher function against string always reduced some steps the angular $parse (which watch uses to create expression) internally takes to convert the string expression to watch function. It can be seen in the switch-case of the $parse implementation

Upvotes: 5

Related Questions