add watch on a non scope variable in angularjs

Question

Is there a way to add watch to a non scope variable. I want to add a watch to local variable. I have something like this

 function EditAssetRegistryController(assetregistryService, manufacturerService, assettypeService, projectService, $localStorage, $routeParams) {
        var vm = this;
        vm.manufacturers = [];
        vm.projects = [];
        vm.asset_types = [];
        vm.ch_group_uniq = 'none';
}

here is there a way to add watch to vm.ch_group_uniq? I know how it will be done with scope variable but I have scenarios where I have to check many complex variables.

Sacho · Accepted Answer · 2015-04-15 06:59:41Z

23

Well, you can easily add a watch for anything by passing a function as the first parameter:

$scope.$watch(function watchFunction(scope) {
    return vm.ch_group_uniq
}, handler)

A few things to consider: watchFunction must return the same value if nothing has changed. This can lead to some gotchas, for example, returning the result of some array operations: [1,2,3].filter(...) will always return a new array, and lead to an endless $digest cycle. Also note the third parameter of $scope.$watch, which indicates whether to use an identity comparison, or angular.equals when comparing the values. (Check out the docs for further information - https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch)

However, your specific problem seems to be trying to use controllerAs and custom $watch-es. There's a very handy library that addresses this issue specifically: https://github.com/christopherthielen/angular-360-no-scope

answered Apr 15, 2015 at 6:59

Sacho

2,1891 gold badge14 silver badges13 bronze badges

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

1 Comment

Tarek El-Mallah Over a year ago

good solution, but when the variable change it doesn't affect watch directly unless there is any other changes in the current scope.

Lacrymology · Accepted Answer · 2016-04-25 12:02:55Z

10

$watch will not work as normal syntax with controllerAs. You need to bind it to $scope, and then you can watch that variable:

Code

$scope.$watch(angular.bind(this, function (ch_group_uniq) {
  return this.ch_group_uniq;
}), function (newVal, oldVal) {
  console.log('Name changed to ' + newVal);
});

Here is the reference Todd Motto Article

edited Apr 25, 2016 at 12:02

Lacrymology

2,2492 gold badges20 silver badges29 bronze badges

answered Apr 15, 2015 at 7:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Skylar Brown · Accepted Answer · 2017-12-04 18:20:21Z

2

A cleaner syntax using ES6

$scope.$watch(() => {
    return this.thingToWatch;
}, (newVal, oldVal) => {
    // Your code here...
});

answered Dec 4, 2017 at 18:20

Skylar Brown

3,5022 gold badges16 silver badges7 bronze badges

Collectives™ on Stack Overflow

add watch on a non scope variable in angularjs

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