javascript - 动态指令 : templateUrl

Question

我真的需要解决以下问题的帮助:

我尝试实现应用程序的一些设置，因此我想使用UI-Bootstrap Accordion 。

---

我有以下HTML代码:

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

“ Accordion ”的 DOM 是一个 div，其中 ng-controller="AccordionController"。在此 Controller 中，我有一个变量 groups，如下所示:

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

---

accordionContent 是我的指令，它应该根据 $index 或 groupTitle(无关紧要)给出不同的模板 URL。

accordionContent 指令看起来像这样:

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

内容还实现了一些 Angular 方面的东西，我读到需要考虑这一点。 (或者不是？)

Answer 1

我不相信你能那样做。我试过一次，如果我没记错的话，没有用。

您可以做的是在指令中有一个静态 HTML 页面，在该 HTML 页面中您将拥有:

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

templateUrl 是 accordion-content 指令中隔离范围(或非隔离..)上的变量。