Angularjs watch service object

Question

Why can't I watch a object in a service. Ive got a simple variable working, but a object wont work. http://plnkr.co/edit/S4b2g3baS7dwQt3t8XEK?p=preview

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

app.service('test', ['$http', '$rootScope',
            function ($http,   $rootScope) {

  var data = 0;
  var obj  = {
                "data": 0
              };

  this.add = function(){
    obj.data += 1;
    console.log('data:', obj);
  };

  this.getData     = function() { return obj; };

}]);

app.controller('TestController', ['$scope', '$rootScope', '$filter', 'test',
                          function($scope,   $rootScope,   $filter,   test) {

  //test controller
  $scope.add = function(){
    test.add();
  };
  $scope.test = test;
  $scope.$watch('test.getData()', function(newVal){
    console.log('data changes into: ', newVal)
  });
}]);

I suggest you to write function(){ return test.getData(); }, instead 'test.getData()'. By this way you can avoid bugs, because angular doesn't validate string definition. — Maxim Shoustin
– Maxim Shoustin, Commented Nov 7, 2014 at 12:19

Pierre Gayvallet · Accepted Answer · 2014-11-07 12:20:16Z

20

injecting whole services into a scope is not something I would do.

I would prefer to watch a function returning the value :

$scope.$watch(function() { return test.getData(); }, function(newVal) { 
    /* Do the stuff */
}, true);

answered Nov 7, 2014 at 12:20

Pierre Gayvallet

2,9532 gold badges24 silver badges38 bronze badges

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

1 Comment

JD Smith Over a year ago

Actually this is the only way I was able to get the watch to work when watching an array instead of a function (e.g. test.data).

Community · Accepted Answer · 2017-05-23 12:17:41Z

14

You need to pass true as the last parameter of the $watch function so that the equality check is angular.equals. Otherwise only reference equality is checked.

$scope.$watch('test.getData()', function(newVal){
  console.log('data changes into: ', newVal)
}, true);

Duplicate question: $watch an object

EDIT

As mentioned bellow, the code includes a bad practice – having a service referenced in $scope. It is not necessary to reference it in scope, since $watch also accepts a getter function as first argument. Clean solution uses this function to return the watched array as is in the answer below. $scope.$watch(function() { return test.getData(); } ...

To list a complete solution you could also use $watchCollection instead to solve the reference equality check problem.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Nov 7, 2014 at 12:06

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angularjs watch service object

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related