タブ付きコンテンツのanglejsコンポーネントインタラクション

私は、AngularJS Developer Guideの例を使用してタブ付きインターフェイス（https://docs.angularjs.org/guide/component - インターコンポーネント通信）を作成しています。静的コンテンツの場合、すべて正常に動作しますが、基礎となるドキュメント（データ）構造を更新すると、タブのリストは新しいコンテンツのタブだけで拡張され、前のタブは何も表示されません（そのコンテンツは消えます）。タブコントローラを更新するには「角のある方法」が必要であると確信しています。そのため、いつでもペインコントローラの実際の内容が反映されます。 $ onInit（）または$ onChanges（）を使用してみると（以下のコードでコメントとして表示されます）、タブが完全に削除されます。おそらく（うまくいけば）2つのコンポーネントの間に適切なバインディングがありませんが、どうやってそれを行うのか分かりません。ここでタブ付きコンテンツのanglejsコンポーネントインタラクション

は私のコードです：

HTML：

<div class="alert alert-danger"> 
    <serv-tabs> 
    <acp-service srv="srv" ng-repeat="srv in data.services"></acp-service> 
    </serv-tabs> 
</div>

はJavaScript：

app.component('acpService', { 
    template: 
     '<serv-pane title="{{$ctrl.srv.LABEL}}">'+ 
     ' <div>SIK: <input type="text" ng-model="$ctrl.srv.SIK">&nbsp;'+ 
     ' <input type="button" class="btn-torch" ng-click="$ctrl.searchForServ()"></input>'+ 
     ' </div>'+ 
     '</serv-pane>', 

    bindings: { 
    srv: '=' 
    }, 
    controller: function AcpServiceController($rootScope, AcpModel) { 
    // Data model ----------------------------- 
    var acpdata = AcpModel.getData(); 
    this.services = acpdata.services; 

    // Event handlers ------------------------- 
    this.searchForServ = function() { 
     $rootScope.DEBUG = "searchForServ("+this.srv.SIK+") was triggered"; 
    }; 
    } 
}); 


// TAB navigation for services 
app.component('servTabs', { 
    transclude: true, 
    controller: function ServTabsController() { 
    var panes = this.panes = []; 

    this.$onInit = function() { 
     //panes = []; 
     console.log('servTabs::onInit() called'); 
    }; 
    this.$onChanges = function(chObj) { 
     //this.panes = []; 
     //panes.length = 0; 
     console.log('servTabs::onChanges() called'); 
    }; 
    this.select = function(pane) { 
     angular.forEach(panes, function(pane) { 
     pane.selected = false; 
     }); 
     pane.selected = true; 
    }; 
    this.addPane = function(pane) { 
     if (panes.length === 0) { 
     this.select(pane); 
     } 
     panes.push(pane); 
    }; 
    }, 
    template: 
    '<div class="tabbable">\n'+ 
    ' <ul class="nav nav-tabs">\n'+ 
    ' <li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">\n'+ 
    '  <a href="" ng-click="$ctrl.select(pane)">{{pane.title}}</a>\n'+ 
    ' </li>\n'+ 
    ' </ul>\n'+ 
    ' <div class="tab-content" ng-transclude></div>\n'+ 
    '</div>\n' 
    }); 
app.component('servPane', { 
    transclude: true, 
    require: { 
    tabsCtrl: '^servTabs' 
    }, 
    bindings: { 
    title: '@', 
    }, 
    controller: function() { 
    this.$onInit = function() { 
     this.tabsCtrl.addPane(this); 
     console.log(this); 
    }; 
    this.$onChanges = function(chObj) { 
     console.log('servPane::onChanges() called'); 
    }; 
    }, 
    template: '<div class="tab-pane" ng-show="$ctrl.selected" ng-transclude></div>' 
});

AcpModelは、バックエンドからのサービスの新しいリストを取得し、コンテンツブロック（servPane）することができます大丈夫ですが、タブリスト（servTabs）は単に拡張されます。

誰かが何をすべきかについてのヒントはありますか？

出典

2017-05-15 Lars Westermann