Dynamic include template angular directive

Question

So I want to make a directive to automatically include tabs and content, but I am unable to get the content stored in partials/tabs/tab[x].html.

AvailableTabs - constant defined as an array :

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 directive detects the correct tab to be included, and tries to include the tab's content as well:

 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>';
                    }
                }
            },
    };
}]);

The problem is that the content of the tab is empty and I have no errors.

My html is the following:

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

I tried injecting $templateCache in the directive but it returns undefined when retrieving the content, I also tried to take the path relative to the script path but still undefined.

Answer 1

Because you had missed ' in ng-include, for passing template name as string. Because ng-include directive requires string as input.

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

will be render as below

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