AngularJS trigger and watch object value change in service from controller

Question

I'm trying to watch for changes in a service from a controller. I tried various things based on many qns here on stackoverflow, but I've been unable to make it work.

html:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-click="setFTag()">Click Me</div>
    </div> 
</div>

javascript:

var myApp = angular.module('myApp',[]);

myApp.service('myService', function() {
    this.tags = {
        a: true,
        b: true
    };


    this.setFalseTag = function() {
        alert("Within myService->setFalseTag");
        this.tags.a = false;
        this.tags.b = false;

        //how do I get the watch in MyCtrl to be triggered?
    };
});


myApp.controller('MyCtrl', function($scope, myService) {

    $scope.setFTag = function() {
        alert("Within MyCtrl->setFTag");
        myService.setFalseTag();
    };        

    $scope.$watch(myService.tags, function(newVal, oldVal) {
        alert("Inside watch");
        console.log(newVal);
        console.log(oldVal);
    }, true);

});

How do I get the watch to trigger in the Controller?

jsfiddle

See my answer in the question here. Your syntax in your watch function isn't what you want, but it's still valid angular syntax, which is why you're not getting a log error. — Hylianpuffball
– Hylianpuffball, Commented Dec 18, 2013 at 20:15

Maxim Shoustin · Accepted Answer · 2014-07-13 20:28:37Z

76

Try to write $watch by this way:

myApp.controller('MyCtrl', function($scope, myService) {


    $scope.setFTag = function() {
       myService.setFalseTag();
    };        

    $scope.$watch(function () {
       return myService.tags;
     },                       
      function(newVal, oldVal) {
        /*...*/
    }, true);

});

Demo Fiddle

[EDIT]

Sometimes this way will not work especially if service has been updated from 3d party.

To make it work we must help to angular to fire digest cycle.

Here is an example:

On service side when we want update tags value write something like:

if($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest'){
   $rootScope.$apply(function() {
     self.tags = true;
   });
 }
 else {
   self.tags = true;
  }

edited Jul 13, 2014 at 20:28

answered Dec 18, 2013 at 20:18

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

6 Comments

joseym Over a year ago

I had no idea you could use watch in this way. This is a game changer. So much win.

Maxim Shoustin Over a year ago

for me this way is better because you avoid spelling mistakes with variables.

Maxim Shoustin Over a year ago

@Phill I only added other test case: if you use for example Cordova plugin thats out of angular scope, the watcher doesn't work. People might copy/paste this example and will be surprised why it doesn't work. So I try to cover different cases

lvarayut Over a year ago

Can you explain a little bit why we have to use the return function? It worked perfectly but I don't really get it.

CodyBugstein Over a year ago

Why is there no return statement in the service? How does that work?

|

Collectives™ on Stack Overflow

AngularJS trigger and watch object value change in service from controller

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related