Wechsel zum übergeordneten Komponenten-Array mit ngRepeat löst kein Kind aus $ onChanges

Question

Ich arbeite mit Eltern-Kind-Komponenten. Die untergeordnete Komponente ist eine unidirektionale Datenbindung ('<') an einen Wert, der über ein ng-repeat über ein Array in der übergeordneten Komponente kommt.

<li ng-repeat="item in $ctrl.items"> 
    <child-component item="item"></child-component> 
</li> 

Und die Komponente:

var childComponent = { 
    bindings: { 
    item: '<' 
    }, 
    controller: 'ChildComponentController', 
    template: '<div>{{ $ctrl.item.name }}</div>' 
} 

Vielleicht habe ich falsch verstanden, wie $onChanges funktionieren soll, aber es scheint wie ein Element in der in dem Kind nennen sollte $onChanges() Elemente Array übergeordnete Steuerung zu aktualisieren. Es aktualisiert die Ansicht wie erwartet. $onChanges() wird für jedes Element auf der ersten Seite geladen, aber nicht für die Änderung.

Hier ist der Code, den ich mit der Mutter Array zu aktualisieren:

function change() { 
    var item = angular.copy(this.items[1]); 
    item.name = 'baz'; 
    angular.copy(item, this.items[1]); 
} 

Voll Plunk: https://plnkr.co/edit/x7WA08

Was ich letztlich zu erreichen versuchen, ist ein boolean this.updated auf das Kind eingestellt Controller, um einen aktualisierten Indikator in der Ansicht anzuzeigen. Der Einfachheit halber macht das Plunk nur eine console.log().

Ich habe viele Beispiele gefunden, um Änderungen vom Kind zurück zum Elternteil zu kommunizieren (was komplizierter zu sein scheint, da es in die entgegengesetzte Richtung der Einwegbindung ist), aber nichts von der Aktualisierung des Kindes Elternteil mit einer ng-Wiederholung. Das scheint so zu sein, als müsste es einfach funktionieren.

Was fehlt mir hier?

aktualisiert

ich vergaß zu erwähnen, ich bin mit Komponenten und $onUpdate weil ich versuche, zu komponentenorientierte Architektur und Angular2 Kompatibilität zu bewegen. Ich hoffe auf eine Lösung, die zu diesem Ziel passt.

Answer 1

Haben Sie versucht, mit der $ watch eckigen Service?

Versuchen Sie einfach die Änderung der ChildComponentController zu:

function ChildComponentController($scope) { 
    $scope.$watch('$ctrl.item.name', function() { 
    alert($scope.$ctrl.item.name); 
    }); 
}