0

我正在使用 AngularJS 开发人员指南中的示例来创建选项卡式界面（https://docs.angularjs.org/guide/component - 组件间通信）。对于静态内容，一切正常，但是当我更新底层文档（数据）结构时，选项卡列表只是扩展了新内容的选项卡，而以前的选项卡只是链接到任何内容（因为该内容已经消失）。我确信必须有一种“角度方式”来更新选项卡控制器，因此它随时都会反映窗格控制器的实际内容。我使用 $onInit() 或 $onChanges() 的尝试（在下面的代码中显示为注释）完全删除了选项卡。我可能（希望只是）错过了两个组件之间的正确绑定，但我不知道该怎么做。

这是我的代码：

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) 只是得到了扩展。

有人对我应该做什么有一些提示吗？

4

1 回答 1

0

如果您需要tabsCtrl通过扩展来避免这种情况，您应该在您servPane的生命周期事件中提供一个挂钩$onDestroy，这最终可以servPane从选项卡列表中删除此实例。

于 2017-05-15T09:52:13.620 回答