탭이있는 내용에 대한 angularjs 구성 요소 상호 작용

AngularJS 개발자 안내서의 예제를 사용하여 탭 인터페이스 (https://docs.angularjs.org/guide/component - Intercomponent Communication)를 만듭니다. 정적 콘텐츠의 경우 정상적으로 작동하지만 기본 문서 (데이터) 구조를 업데이트하면 탭 목록이 새 콘텐츠의 탭으로 확장되고 이전 탭은 아무 것도 연결되지 않습니다 (해당 콘텐츠가 사라짐). 탭 컨트롤러를 업데이트하기 위해 "각도 방법"이 있어야한다는 것을 확신합니다. 언제든지 창 컨트롤러의 실제 내용을 반영합니다. $ onInit() 또는 $ onChanges()를 사용하여 내 시도 (아래 코드에 주석으로 표시)가 탭을 완전히 제거합니다. 두 구성 요소 사이의 적절한 바인딩을 놓친 것 같습니다.하지만이를 수행하는 방법을 알 수는 없습니다. 여기 탭이있는 내용에 대한 angularjs 구성 요소 상호 작용

내 코드입니다 :

HTML :

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

자바 스크립트 :

이

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)이 확장됩니다.

누구에게 내가해야 할 일에 대한 힌트가 있습니까? 당신이 확장하기로 tabsCtrl을 피하기 위해 필요한 경우

출처

2017-05-15 Lars Westermann