動態包含模板角度指令

Question

所以我想制定一個指令來自動包含標籤和內容，但我無法獲取存儲在partials/tabs/tab[x].html中的內容。

AvailableTabs - 定義爲數組常數：

myApp.constant("availableTabs", [ 
    {name:'tab1', title:'One', content:'partials/tabs/tab1.html'}, 
    {name:'tab2', title:'Two', content:'partials/tabs/tab2.html'}, 
    {name:'tab3', title:'Three', content:'partials/tabs/tab3.html'} 
]); 

我的指令檢測被包括在正確的選項卡，並試圖以包括選項卡的內容，以及：

myApp.directive('myTabs',['availableTabs','$templateCache', function(availableTabs, $templateCache) { 
     return { 
      restrict: 'A', 
      template: function (elem, attr) { 
       for (index = 0; index < availableTabs.length; ++index) { 
        if(availableTabs[index].name == attr.myTabs) { 
         return '<tab heading="'+availableTabs[index].title+'" ng-show="1"> ' + 
           '<div ng-include="'+availableTabs[index].content+'"></div>'+ 
          '</tab>'; 
         //return '<tab heading="'+availableTabs[index].title+'" ng-show="1"> ' + 
         // $templateCache.get(availableTabs[index].content)+ 
         // '</tab>'; 
        } 
       } 
      }, 
    }; 
}]); 

的問題是該標籤的內容是空的，我沒有錯誤。

我的HTML如下：

<tabset> 
    <div my-tabs="tab1"></div> 
    <div my-tabs="tab2"></div> 
    <div my-tabs="tab3"></div> 
</tabset> 

我試圖注入的指令$templateCache，但在檢索內容時返回undefined，我也試圖相對腳本路徑的路徑走，但仍然undefined。

Answer 1

因爲您錯過了'的ng-include，用於傳遞模板名稱爲string。因爲ng-include指令要求輸入string。

ng-include="\''+availableTabs[index].content+'\'" 

將呈現如下

ng-inlcude="'partials/tabs/tab1.html'"