Valore modificato su Servizio AngularJS che non attiva l'orologio all'interno della direttiva

Question

Ho riscontrato un problema nel far funzionare un orologio all'interno di una direttiva. Ho messo insieme un semplice esempio qui. http://plnkr.co/edit/A7zbrsh8gJhdpM30ZH2P

Ho un servizio e due direttive. Una direttiva modifica una proprietà nel servizio e un'altra direttiva ha un orologio su quella proprietà. Mi aspettavo che l'orologio sparasse quando la proprietà è cambiata, ma non è così.

Ho visto alcune altre domande come questa sul sito, ma le soluzioni accettate su di esse non hanno funzionato qui. Ho preso in considerazione l'utilizzo di $ broadcast o il tentativo di implementare un osservatore, ma sembra che questo dovrebbe funzionare e non voglio complicare troppo le cose se possibile.

Answer 1

Invece di

this.currentObject = newObject; 

uso

angular.copy(newObject, this.currentObject); 

Con il codice originale, la direttiva viewer sta guardando l'oggetto originale, {}. Quando currentObject è impostato su newObject, $ watch sta ancora cercando una modifica dell'oggetto originale, non newObject.

angular.copy() modifica l'oggetto originale, quindi $ watch vede tale modifica.

Answer 2

La risposta di Mark Rajcok è incompleta. Anche con angular.copy(), il listener di $ watch verrà chiamato una volta e mai più.

È necessario $ guardare una funzione di:

$scope.$watch(

    // This is the important part 
    function() { 
    return demoService.currentObject; 
    }, 

    function(newValue, oldValue) { 
    console.log('demoService.currentObject has been changed'); 
    // Do whatever you want with demoService.currenctObject 
    }, 
    true 
); 

Qui il plunker che funziona: http://plnkr.co/edit/0mav32?p=preview

Aprire la console browser per vedere che sia la direttiva e la demoService2 vengono informati sui cambiamenti demoService.currentObject .

E btw angular.copy() non è nemmeno necessario in questo esempio.