javascript - 子コンポーネントが親からブロードキャストを受信して​​いない

Question

Angular 1.5 で単純なグリッド コンポーネントを構築していますcomponent。構造は次のとおりです。

<grid-component>
    <grid-header>
        <grid-cell key="one">Column One</grid-cell>
        <grid-cell key="two">Column Two</grid-cell>
        <grid-cell key="three">Column Three</grid-cell>
    </grid-header>
    <grid-row ng-repeat="item in ctrl.items" model="items">
        <grid-cell key="one">{{ items.one }}</grid-cell>
        <grid-cell key="two">{{ items.two }}</grid-cell>
        <grid-cell key="three">{{ items.three }}</grid-cell>
    </grid-row>
</grid-component>

は<grid-component>にイベントをブロードキャストし<grid-header>ますが、ヘッダー コンポーネントはメッセージを受信して​​いません。

これが私の使い方の簡単な例です。

app
.component('gridComponent', {
    controller: function($scope) {
        this.$onInit = function() {
            resource.getItems()
                .then(function(items) {
                    $scope.broadcast('update', items);
                }); 
        };
    }
})
.component('gridHeader', {
    controller: function($scope) {
        $scope.on('update', function(event, items) {
            controller.items = items;
        });
    }
});

興味深いことに、スコープを調べると、それらは実際にはスコープ階層の兄弟であるということです。

親

{
    childHead: null,
    $$childTail: null,
    $$destroyed: false,
    $$isolateBindings: Object,
    $$listenerCount: Object,
    $$listeners: Object,
    $$nextSibling: null,
    $$phase: null,
    $$prevSibling: null,
    $$watchers: null,
    $$watchersCount: 0,
    $ctrl:module.exports.controller,
    $id: 80,
    $parent: {
        $$ChildScope: null,
        $$childHead: h,
        $$childTail: h,
        $$listenerCount: Object,
        $$listeners: Object,
        $$nextSibling: null,
        $$prevSibling: null,
        $$transcluded: true,
        $$watchers: Array[4],
        $$watchersCount: 4,
        $id: 79,    <---
        $parent: {}
    }
}

子

{
    childHead: null,
    $$childTail: null,
    $$destroyed: false,
    $$isolateBindings: Object,
    $$listenerCount: Object,
    $$listeners: Object,
    $$nextSibling: null,
    $$phase: null,
    $$prevSibling: { parentObject }, <---
    $$watchers: null,
    $$watchersCount: 0,
    $ctrl:module.exports.controller,
    $id: 91,
    $parent: {
        $$ChildScope: null,
        $$childHead: h,
        $$childTail: h,
        $$listenerCount: Object,
        $$listeners: Object,
        $$nextSibling: null,
        $$prevSibling: null,
        $$transcluded: true,
        $$watchers: Array[4],
        $$watchersCount: 4,
        $id: 79, <---
        $parent: {}
    }
}

両方の親のメモ ID は同じです。また、子の prevSibling が親であることに注意してください。

変更$scope.$broadcastする$scope.$parent.$broadcastと、兄弟であるため、期待どおりに機能します。

コンポーネントがネストされている場合、Angular がこれらを兄弟と見なすのはなぜですか? また、$parentチェーンをたどらずにイベントをブロードキャストする方法はありますか?