选项卡式内容的angularjs组件交互

Posted 2023-02-23

【中文标题】选项卡式内容的angularjs组件交互

【英文标题】：angularjs component interaction for tabbed content

【发布时间】：2017-10-14 00:10:45

【问题描述】：

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

这是我的代码：

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

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

【参考方案1】：

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

【讨论】：

谢谢，这样做了:) 添加了一个 servTabs::delPane(pane) 方法和一个 servPane::$onDestroy() ，它只调用了 delPane(this)。