I am facing an issue while creating a directive that should automatically add tabs and their content. The problem I'm encountering is retrieving the content stored in partials/tabs/tab[x].html.
In my code, I have defined a constant named AvailableTabs which holds an array like this:
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'}
]);
My custom directive aims to identify the correct tab to be added and also load its respective content:
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>';
}
}
},
};
}]);
Despite no errors being thrown, the content of the tabs is not loading successfully.
This is how I've structured my HTML elements:
<tabset>
<div my-tabs="tab1"></div>
<div my-tabs="tab2"></div>
<div my-tabs="tab3"></div>
</tabset>
I have attempted injecting $templateCache into the directive, but it returns as undefined when trying to access the content. I have also tried using relative paths based on the script location with no success.