Tabset bootstrap dell'interfaccia utente angolare + ng-include

Question

Ho problemi nell'impostare un tabset con contenuti dinamici usando ng-include. Ho provato senza successo con 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> 

Inoltre, ho provato senza il 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> 

Eppure, quello che ottengo è una pagina Blanck, non risponde e quegli errori:

WARNING: Tried to load angular more than once. 

e

10 $digest() iterations reached. Aborting! 

FYI: i modelli sono principalmente vuoti, quello non vuoto contiene una tabella di base. Come posso farlo funzionare?

Answer 1

Sembra che ci siano più preventivi quando si utilizza ng-repeat. Le virgolette aggiuntive in ng-include="'x.html'" sono necessarie solo se è utilizzato come attributo.

Quando lo si specifica come variabile in JavaScript, si imposta la variabile di ambito in JavaScript nel modo seguente: $scope.someTemplateUrl = "x.html"; quindi impostare l'attributo su ng-include="someTemplateUrl". Si noti che il valore della variabile non contiene le virgolette singole.

E la seconda versione si dovrebbe fare tab[0].heading anziché tab.0.heading (e a partire da 0 anziché 1).

Ho creato un Plunker contenente una versione funzionante e sembra funzionare correttamente:

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

Quello che ho fatto:

• rimosso le citazioni in più dalla proprietà modello
• rimosso html5Mode perché Plunker non funziona con quello.

Quindi qualcosa di simile:

$scope.tabs = [ 
     { 
      "heading": "Tab 1", 
      "active": true, 
      "template":"tab1.html" 
     }, 
     ...