AngularJS：组件通信 - 插入子内容

Question

这里有一个官方例子intercomponent communication

我想要一些不同的行为。比方说，我希望窗格内容是选项卡名称。

例如

<my-tabs>
  <my-pane>Hello</my-pane>
  <my-pane>World</my-pane>
</my-tabs>

然后在父模板中我尝试了类似的方法，但它不起作用。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="$ctrl.select(pane)"><div class="tab-content" ng-transclude></div></a>
    </li>
  </ul>
</div>

怎么可能？

Answer 1

为此，您需要手动获取嵌入的内容并将其设置为标题。更改tab-pane的控制器如下：

 controller: function($transclude) {
    this.$onInit = function() {
      $transclude(clone => {
        this.title = clone.text();
      });

      this.tabsCtrl.addPane(this);
    };
  }