Açısal UI Önyükleme sekmesi + ng-dahil

Question

ng-include kullanarak dinamik içeriğe sahip bir sekme oluşturmayla ilgili sorun yaşıyorum. ne olsun yanıt vermeyen bir blanck sayfa ve bu hataları,

<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> 

Oysa: Ayrıca

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

, ben ng-tekrarı olmadan çalıştı: Ben ng-tekrarı ile çabaladılar

WARNING: Tried to load angular more than once. 

ve

10 $digest() iterations reached. Aborting! 

FYI: şablonlar çoğunlukla boştur, boş olmayanlar temel bir tablo içerir. Nasıl çalışırım?

Answer 1

ng-repeat kullanırken fazladan teklif aldığınız anlaşılıyor. ng-include="'x.html'"'daki ek alıntılar yalnızca bir özellik olarak kullanılıyorsa gereklidir.

JavaScript'te bir değişken olarak belirtilirken, kapsam değişkenini JavaScript olarak aşağıdaki gibi ayarlarsınız: $scope.someTemplateUrl = "x.html"; ardından özniteliği ng-include="someTemplateUrl" olarak ayarlayın. Dikkat, değişkenin değeri tek tırnak içermiyor.

Ve ikinci sürümde tab.0.heading yerine tab[0].heading yapmalısınız (ve 0'dan başlayarak 0'dan başlayarak).

Ben çalışan bir sürümünü içeren bir Plunker oluşturduk ve doğru şekilde çalışmak gibi görünüyor:

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

Yaptıklarımı:

• şablon özelliğinden ekstra tırnak kaldırıldı
• html5Mode kaldırıldı çünkü Plunker bununla çalışmaz.

Yani böyle bir şey:

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