Question

我使用AngularJS开发人员指南中的示例来创建选项卡式界面（https://docs.angularjs.org/guide/component - 组件间通信）。对于静态内容，一切正常，但是当我更新基础文档（数据）结构时，选项卡列表只是扩展了新内容的选项卡，而之前的选项卡只是链接到任何内容（因为内容已经消失）。我确信必须有一个“Angular方式”来更新选项卡控制器，因此它随时都会反映窗格控制器的实际内容。我使用$ 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）看起来没问题，但是tab-list（servTabs）只是扩展了。

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

Answer 1

如果您需要通过扩展来避开tabsCtrl，则应在servPane中提供$onDestroy生命周期事件的摘要，最终可以删除此servPane选项卡列表中的实例。

有标签内容的angularjs组件交互

1 个答案: