2013-08-01 4 views
10

Ich habe ein Problem, eine Uhr in einer Direktive arbeiten zu lassen. Ich habe hier ein einfaches Beispiel zusammengestellt. http://plnkr.co/edit/A7zbrsh8gJhdpM30ZH2PGeänderter Wert für AngularJS-Dienst, der keine Überwachung innerhalb der Direktive auslöst

Ich habe einen Service und zwei Direktiven. Eine Direktive ändert eine Eigenschaft im Dienst und eine andere Direktive hat eine Überwachung für diese Eigenschaft. Ich habe erwartet, dass die Uhr feuern würde, wenn sich das Grundstück ändert, aber das tut es nicht.

Ich habe ein paar andere Fragen wie diese auf der Website gesehen, aber die akzeptierten Lösungen auf ihnen haben hier nicht funktioniert. Ich habe überlegt, $ broadcast zu verwenden oder einen Beobachter zu implementieren, aber es scheint, als ob das funktionieren sollte und ich möchte die Dinge nicht zu kompliziert machen, wenn es möglich ist.

Antwort

5

Statt

this.currentObject = newObject; 

Verwendung

angular.copy(newObject, this.currentObject); 

Mit dem Original-Code, der viewer Richtlinie beobachtet das ursprüngliche Objekt, {}. Wenn currentObject auf newObject festgelegt ist, sucht die $ watch immer noch nach einer Änderung des ursprünglichen Objekts, nicht newObject.

angular.copy() modifiziert das ursprüngliche Objekt, so dass die $ watch diese Änderung sieht.

+0

Danke, ich wusste, es war wahrscheinlich etwas einfaches. Ein anderer Thread hatte erwähnt, dass das Übergehen der dritten Eigenschaft der Uhr als wahr das handhaben würde, also hatte ich aufgehört, diese Route zu untersuchen. –

28

Mark Rajcok 'Antwort ist unvollständig. Sogar mit angular.copy() wird $ watch Listener einmal und nie wieder aufgerufen.

Sie benötigen eine Funktion $ sehen:

$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 
); 

Hier die Plunker, das funktioniert: http://plnkr.co/edit/0mav32?p=preview

Öffnen Sie Ihren Browser-Konsole, um zu sehen, dass sowohl die Richtlinie und die demoService2 über demoService.currentObject Änderungen informiert werden .

Und btw angular.copy() wird in diesem Beispiel nicht einmal benötigt.

+2

Perfekte Antwort. Dies ist der richtige Weg, dies zu tun. – krosullivan