/ / Табло + ъглово UI Bootstrap + ng-include - angularjs, angular-ui-bootstrap

Ъглова UI Bootstrap табла + ng-включват - ъглови, ъглово-ui-bootstrap

Имам проблеми с настройката на табс с динамично съдържание, използвайки ng-include. Неуспешно се опитах с 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>

Също така се опитах и ​​без 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>

И все пак, това, което получавам, е празна страница, която не отговаря и тези грешки:

WARNING: Tried to load angular more than once.

и

10 $digest() iterations reached. Aborting!

FYI: шаблоните са предимно празни, непълната съдържа основна таблица. Как да го накарам да работи?

Отговори:

13 за отговор № 1

Изглежда, че имате допълнителни кавички, когато използвате ng-repeat, Допълнителните кавички в ng-include=""x.html"" са необходими само ако се използва като атрибут.

Когато го определяте като променлива в JavaScript, задавате променливата на обхвата в JavaScript, както следва: $scope.someTemplateUrl = "x.html"; след това задайте атрибута на ng-include="someTemplateUrl", Забележете, че стойността на променливата не съдържа единичните кавички.

И втората версия, която трябва да правите tab[0].heading отколкото tab.0.heading (и започва от 0, а не от 1).

Създадох Plunker, съдържащ работеща версия и изглежда, че работи правилно:

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

Това, което направих:

  • премахна допълнителните кавички от свойството на шаблона
  • премахна html5Mode, защото Plunker не работи с това.

Така че нещо като:

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