9

I have trouble setting up a tabset with dynamic contents using ng-include. I tried unsuccessfully with ng-repeat :

<tabset justified="true">
    <tab ng-repeat="tab in tabs" heading="{{ tab.heading }}" active="tab.active">
         <div ng-include="tab.template"></div>
    </tab>
</tabset>

Also, I tried without the ng-repeat :

<tabset justified="true">
    <tab heading="{{ tabs.1.heading }}" active="tabs.1.active">
         <div ng-include="'partial/profile/template1.html'"></div>
    </tab>
    <tab heading="{{ tabs.2.heading }}" active="tabs.2.active">
         <div ng-include="'partial/profile/template2.html'"></div>
    </tab>
    <tab heading="{{ tabs.3.heading }}" active="tabs.3.active">
         <div ng-include="'partial/profile/template3.html'"></div>
    </tab>
    <tab heading="{{ tabs.4.heading }}" active="tabs.4.active">
         <div ng-include="'partial/profile/template4.html'"></div>
    </tab>
    <tab heading="{{ tabs.5.heading }}" active="tabs.5.active">
         <div ng-include="'partial/profile/template5.html'"></div>
    </tab>
</tabset>

Yet, what I get is a blanck page, not responding and those errors :

WARNING: Tried to load angular more than once.

and

10 $digest() iterations reached. Aborting!

FYI: the templates are mainly empty, the one not empty contain a basic table. How am I to make it work ?

2
  • Is it possible for you to provide plnkr? Commented Oct 21, 2014 at 16:02
  • plnkr.co/edit/g3bI4HjXW2Qtg1wHhsA6 I can't make it work on plunker, but it's a simplified version of what I'm trying to achieve. Commented Oct 22, 2014 at 12:19

1 Answer 1

13

Looks like you had extra quotes when using ng-repeat. The extra quotes in ng-include="'x.html'" are only needed if it's used as an attribute.

When specifying it as a variable in JavaScript, you set the scope variable in JavaScript as follows: $scope.someTemplateUrl = "x.html"; then set the attribute to ng-include="someTemplateUrl". Notice the value of the variable doesn't contain the single quotes.

And the second version you should be doing tab[0].heading rather than tab.0.heading (and starting from 0 rather than 1).

I've created a Plunker containing a working version and it seems to work correctly:

http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview

What I did:

  • removed the extra quotes from the template property
  • removed html5Mode because Plunker doesn't work with that.

So something like:

$scope.tabs = [
        {
            "heading": "Tab 1",
            "active": true,
            "template":"tab1.html"
        },
        ...
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.