标签内容中的 angular-ui 标签加载模板 [英] angular-ui tabs loading template in tab-content
问题描述
我正在使用这个控制器的 angular-ui 中的标签:
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>
但我想将内容设置为模板我该怎么做,我尝试在此 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.
如果你找到这个解决方案并且你没有使用 angular-bootstrap v0.12 你需要更新代码到 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-bootstrap v0 的语法.13.
I already updated the plunker to have the syntax of the angular-bootstrap v0.13.
推荐答案
只需将 ng-include 添加为窗格的子项
Just add the ng-include as a child of the pane
<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窗格变量.
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-include的优先级值为0(默认)而ng-repeat的优先级为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:
- ng-include
- ng-repeat
请参阅指令文档
这篇关于标签内容中的 angular-ui 标签加载模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!