在标签内容角UI选项卡装载模板 [英] angular-ui tabs loading template in tab-content

问题描述

我使用的角度，用户界面​​选项卡使用此控制器：

I'm using the tabs in angular-ui using this controller:

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

和这个在HTML文件中：

and this in the html file:

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

但我想的内容设置为模板，我怎么能做到这一点，我尝试设置NG-包括在这个code的 plunker ，但没有奏效。结果
先谢谢了。

but i want to set the content as a template how can I do that, I tried setting the ng-include code in this plunker, but didn't work.
Thanks in advance.

如果你发现这个解决方案，找你不使用角引导v0.12你需要更新code到的 V0.13的新语法是这样的：

if you find this solution and you'r not using angular-bootstrap v0.12 you need to update the code to the new syntax of v0.13 like this:

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

我已经更新了 plunker 有angular-的语法引导V0.13。

I already updated the plunker to have the syntax of the angular-bootstrap v0.13.

推荐答案

只需添加 NG-包含作为窗格的子

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

这部作品的原因是，当您使用 NG-包含中的 NG-重复相同的元素创建的范围变量窗格尚未公布窗格中的变量。

The reason this works is that the scope variable pane is not yet available when you use the ng-include in the same element as the ng-repeat that creates the pane variable.

这是因为优先级值在 NG-包含为0（默认值），而NG重复的优先级为1000，所以执行的顺序是：

This is because the priority value of the ng-include is 0(the default) while the priority of the ng-repeat is 1000 and so the order of execution is:

1. NG-包括


2. NG-重复

查看指令文档

这篇关于在标签内容角UI选项卡装载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！