そのため、タブとコンテンツを自動的に含めるディレクティブを作成したいのですが、に格納されているコンテンツを取得できません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
.