Angulaire UI Bootstrap tabset + ng-inclure
J'ai de la difficulté à mettre en place un tabset avec du contenu dynamique à l'aide de ng-include.
J'ai essayé sans succès avec 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>
Aussi, j'ai essayé sans le 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>
Encore, ce que je reçois est un blanck page, ne répond pas et ces erreurs :
WARNING: Tried to load angular more than once.
et
10 $digest() iterations reached. Aborting!
Pour info: les modèles sont essentiellement vide, celle qui n'est pas vide contient une table de base.
Comment suis-je pour le faire fonctionner ?
Est-il possible pour vous fournir plnkr?
plnkr.co/modifier/g3bI4HjXW2Qtg1wHhsA6 je ne peux pas le faire fonctionner sur plunker, mais c'est une version simplifiée de ce que je suis en train de réaliser.
plnkr.co/modifier/g3bI4HjXW2Qtg1wHhsA6 je ne peux pas le faire fonctionner sur plunker, mais c'est une version simplifiée de ce que je suis en train de réaliser.
OriginalL'auteur Romain | 2014-10-21
Vous devez vous connecter pour publier un commentaire.
Il semble que vous ayez guillemets supplémentaires lors de l'utilisation de
ng-repeat
. Les guillemets supplémentaires dansng-include="'x.html'"
ne sont nécessaires que si elle est utilisée comme un attribut.Lors de la spécification comme une variable en JavaScript, vous pouvez définir la portée de la variable en JavaScript comme suit:
$scope.someTemplateUrl = "x.html";
puis définissez l'attribut deng-include="someTemplateUrl"
. Notez la valeur de la variable ne contient pas de guillemets simples.Et la deuxième version que vous devriez faire
tab[0].heading
plutôt quetab.0.heading
(et à partir de 0 au lieu de 1).J'ai créé un Plunker contenant une version de travail et il semble fonctionner correctement:
http://plnkr.co/edit/cL9RPB4otw57pORJqjvx?p=preview
Ce que j'ai fait:
Donc quelque chose comme:
OriginalL'auteur sirhc