Oggetto servizio orologio Angularjs

Question

Perché non riesco a guardare un oggetto in un servizio. Ho una variabile semplice che funziona, ma un oggetto non funzionerà. 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) 
    }); 
}]); 

Answer 1

è necessario passare vero come l'ultimo parametro della funzione $ orologio in modo che il controllo di uguaglianza è angular.equals. Altrimenti viene verificata solo l'uguaglianza di riferimento.

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

domanda Duplicate: $watch an object

EDIT

come muggito accennato, il codice comprende una cattiva pratica - avere un servizio di riferimento in $scope. Non è necessario fare riferimento in ambito, dal momento che $watch accetta anche una funzione getter come primo argomento. La soluzione pulita utilizza questa funzione per restituire l'array visto come nello answer below. $scope.$watch(function() { return test.getData(); } ...

Per elencare una soluzione completa che si potrebbe anche usare $watchCollection invece di risolvere il problema di controllo uguaglianza di riferimento.

Answer 2

iniettare servizi completi in un ambito non è qualcosa che farei.

preferirei vedere una funzione che restituisce il valore:

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