dynamic directive: templateUrl

Question

I really need help by solving the following problem:

I try to realize some settings for an application, therefore I want to use the UI-Bootstrap accordion.

---

I have the following HTML-Code:

<accordion close-others="oneAtATime">
    <accordion-group ng-repeat="group in groups" heading="{{group.groupTitle}}">
        <accordion-content></accordion-content>
    </accordion-group>
</accordion>

The DOM of the "accordion" is a div where ng-controller="AccordionController". In this Controller I have a variable groups which looks like this:

$scope.groups = [{
        groupTitle: "title1",
        templateUrl: "file1.html"
    }, {
        groupTitle: "title2",
        templateUrl: "file2.html"
    }]; // ... and so on

---

accordionContent is my directive which should give different templateURLs depending on the $index or groupTitle (doesn't matter).

The accordionContent-directive looks like this:

settings.directive("accordionContent", function () {
    return {
        restrict: "E",
        templateUrl: //**here is my problem**
    };
});

The content also has some angular-stuff implemented, I read that this need to get considered. (or not ?)

Answer 1

I don't believe you can do that like that. I tried myself once, didn't work if I remember correctly.

What you can do is have a static HTML page in the directive, and in that HTML page you'll have:

<div>
    <div class="slide-animate" ng-include="templateUrl"></div>
</div>

Where templateUrl is the variable on your isolated scope (or not isolated..) in the accordion-content directive.