更新

Question

我正在使用此控制器在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 添加为窗格的子项

即可

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

这样做的原因是，当您在与 ng-repeat 相同的元素中使用 ng-include 时，范围变量窗格尚不可用窗格变量。

这是因为 ng-include 的优先级值为0（默认值），而ng-repeat的优先级为1000，因此执行顺序为：

NG-包括
纳克重复

请参阅directive docs

angular-ui tabs在tab-content中加载模板

更新

1 个答案: