2017-09-12 6 views
1

親コンポーネントと子コンポーネントを使用しています。子コンポーネントは、片方向データ('<')で、親コンポーネント内の配列上のng-repeatを経由した値にバインドされています。

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

とコンポーネント:
var childComponent = { 
    bindings: { 
    item: '<' 
    }, 
    controller: 'ChildComponentController', 
    template: '<div>{{ $ctrl.item.name }}</div>' 
} 

おそらく、私が動作するようになっているか$onChanges誤解しましたが、それは子供に$onChanges()を呼び出す必要があり、親コントローラのitems配列内のアイテムを更新するように思える

。期待どおりビューを更新します。 $onChanges()は、最初のページの読み込み時に各項目に対して発生しますが、変更は発生しません。ここで

は、私は、親配列を更新するために使用しているコードです:

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

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

私が最終的に達成しようとしていることは、子供にブールthis.updatedを設定することですコントローラがビュー内に更新されたインジケータを表示します。単純化のために、大声はちょうどconsole.log()をします。

子から子への変更を親から親に伝えるための例がたくさんあります(片方向バインディングと反対の方向になっているので、もっと複雑に思えますが)。 ng-repeatを持つ親。それはちょうどうまくいくように思える。

私はここで何が欠けていますか?

更新

私はコンポーネント指向アーキテクチャとAngular2の互換性に向かって移動しようとしているので、私は、私はコンポーネントを使用して$onUpdateよ、言及するのを忘れてしまいました。私はこの目標に合った解決策を望んでいます。

答えて

1

$ watch角度サービスを試しましたか?

だけにChildComponentControllerを変更してみてください:

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

応答をいただき、ありがとうございます。これは実際には機能します。私が質問したところで、コンポーネントと '$ onChanges'を使った理由は、私がAngular2互換に移行しようとしているということです。 '$ scope'と' $ watch'はもはや利用できないと私は理解しています。 –

関連する問題