angular-ui tabs loading template in tab-content

Question

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"}
];

and this in the html file:

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

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.

update:

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>

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

Liviu T. · Accepted Answer · 2013-02-15 15:27:02Z

25

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>

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.

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

See the directive docs

edited Feb 15, 2013 at 15:27

answered Feb 15, 2013 at 15:13

Liviu T.

23.7k10 gold badges64 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yahya KACEM Over a year ago

Thanks that worked, but could you explain why it worked this way not how i wrote it the first time, or just point me to where I can found it.

Collectives™ on Stack Overflow

angular-ui tabs loading template in tab-content

update:

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

update:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related