AngularJS: компонент связи - интерполировать дочерний контент

Question

Вот официальный пример межкомпонентной связи

Я хочу немного другого поведения. Допустим, я хочу, чтобы содержимое панели было именем вкладки.

Например

<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

Для этого вам нужно будет вручную получить включенный контент и установить его в качестве заголовка. Измените контроллер панели вкладок следующим образом:

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

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