Angular UI Bootstrap tabset + ng-include

问题:

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 ?

回答1:

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"         },         ... 

文章来源: Angular UI Bootstrap tabset + ng-include