Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs watchGroup() not working with Service changes

I'm having problems to watch multiple variables in a Service when some changes are made on it by other controllers. I've the following:

angular.module('carApp').controller('CarListCtrl', function ($scope, CarService) {
    $scope.carList = CarService.carList
    $scope.initalAmount = CarService.initialAmount
    $scope.startDate = CarService.startDate

    $scope.$watchGroup(['carList', 'initialAmount', 'startDate'],
        function (newValues, oldValues, $scope) {
            console.log(newValues);
        });
});

Other controllers update the values in the Service all the time but the watchGroup never fires up...

I've create a simple watch targeting the service directly to check if work, and it's working ..., so I imagine that the watchGroup should target the service variable directly but I can't find how to do that....

here is the simple watch that works:

$scope.$watch(function () {
    return CarService.carList
}, function (newVal, oldVal) {
     console.log(newVal);
});

What should I do to make it works with the multiple service variables?

UPDATE 1:

Just a update... if I try the watchgroup with just one element, for example $scope.$watchGroup(['carList'], ... it works, so I tried with each one and it works every time, but as soon as I add one more element it stop working... very annoying...

Tks again guys!

like image 564
tubadc Avatar asked Sep 17 '25 20:09

tubadc


1 Answers

Just to close this, people from angularjs github help me out: here is the anwser for anyone who need:

Each value inside a watchGroup array can be a expression or a function, so you can use three different functions inside your watchGroup. http://plnkr.co/edit/nMmPt808xAFXqjJ6yEoc?p=preview

$scope.$watchGroup([
    function() {
      return myService.valueOne()
    },
    function() {
      return myService.valueTwo()
    }    
  ], function(newValues, oldValues) {
    $scope.valueOne = newValues[0]
    $scope.valueTwo = newValues[1]
  })

Your first example is possibly not working because your other controllers assign new values to initialAmount and startDate in your service, which means you have different objects with different values in your controller and your startDate. It´probably works with the carList, because you are only adding / removing items, which means it remains the same object in your controller and your service.

like image 179
tubadc Avatar answered Sep 23 '25 11:09

tubadc