动态指令：templateUrl

Posted 2023-02-22

【中文标题】动态指令：templateUrl

【英文标题】：dynamic directive: templateUrl

【发布时间】：2015-03-03 00:39:48

【问题描述】：

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

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

---

我有以下 HTML 代码：

<accordion close-others="oneAtATime">
    <accordion-group ng-repeat="group in groups" heading="group.groupTitle">
        <accordion-content></accordion-content>
    </accordion-group>
</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**
    ;
);

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

【参考方案1】：

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

您可以在指令中添加一个静态 HTML 页面，然后在该 HTML 页面中您将拥有：

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

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

【讨论】：

我在ng-repeat 中使用了div 和ng-include="group.templateUrl" - 非常感谢！