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

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，則需要將代碼更新為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，因此執行順序為：

1. NG-包括
2. NG-重復

請參閱指令文檔