动态指令：templateUrl

Question

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

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

我有以下 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"。在这个控制器中，我有一个变量 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**
    };
});

该内容还实现了一些有角度的东西，我读到这需要考虑。（或者不是？）

Answer 1

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

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

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

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

动态指令：templateUrl

dynamic directive: templateUrl

javascript

angularjs

angularjs-ng-repeat

angular-ui-bootstrap

angular-directive