angularjs - 标签内容中的 angular-ui 标签加载模板

Question

我正在使用此 Controller 在 angular-ui 中使用选项卡:

$scope.panes = [
    { title:"Home",      content:"home" , active: true},
    { title:"Settings",  content:"settings"},
    { title:"View",      content:"view"}
];

这在 html 文件中:

<tabs>
    <pane
      active="pane.active"
      heading="{{pane.title}}"
      ng-repeat="pane in panes"
    >
      {{pane.content}}
    </pane>
  </tabs>

但我想将内容设置为模板我该怎么做，我尝试在此 plunker 中设置 ng-include 代码，但没有用。
提前致谢。
更新:
如果您找到此解决方案并且您没有使用 angular-bootstrap v0.12，则需要将代码更新为 the new syntax of v0.13像这样:

<tabset>
    <tab
      active="pane.active"
      heading="{{pane.title}}"
      ng-repeat="pane in panes"
    >
      <div ng-include="pane.content"></div>
    </tab>
  </tabset>

我已经更新了 plunker具有 angular-bootstrap v0.13 的语法。

Answer 1

只需添加 ng-include 作为 Pane 的 child

<tabs>
    <pane active="pane.active"
          heading="{{pane.title}}"
          ng-repeat="pane in panes">
        <div ng-include="pane.content"></div>
    </pane>
</tabs>

这样做的原因是当您使用 时，作用域变量 Pane 尚不可用。 ng-include 在与 相同的元素中ng-repeat 创建 Pane 变量。

这是因为 的优先级值ng-include 是 0(默认)，而 ng-repeat 的优先级是 1000，所以执行顺序是:

ng-包括

ng-repeat

见 directive docs