Question

我正在创建一个指令，其中模板我需要使用范围的变量值作为要加载的指令（或控制器）的名称。

假设我有一个指令小部件，其中有一个名为widget.html的模板，如下所示：

<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
    <div class="navBar">
        <div ng-include="widget.type + '-t.html'"></div>
    <i class="fa fa-close"></i>
    <hr>
    </div>
    <div ng-include="widget.type + '-f.html'"></div>
</div>

现在widget.type未在第一行评估。它适用于ng-include。说widget.type的值为weather。然后第一行应首先插入看起来像（如果类属性，widget.type-attr或ng-controller被插值则无关紧要）

<div class="widget" weather>

编译

和然后以包含天气指令。

如何在模板中插入 widget.type？

不能选择使用ng-include加载指令。我需要为窗口小部件使用一个通用模板，并希望添加/覆盖/扩展基本指令与附加功能/变量。

如果这不是实现这一目标的方法，有没有办法扩展指令 OOP方式？

See the plunkr

Answer 1

您只能在文本节点和属性值中放置插值表达式。 AngularJS首先将其转换为DOM，然后调用指令编译等来评估您的模板。如果您尝试放置{{...}}而不是属性 name ，那么您最终会陷入困境DOM。

如果您确实需要根据$scope变量值替换整个指令，则需要create a directive for application of other directives并使用$compile做一些繁重的工作（您必须完全每次值更改时重新编译模板）。在尝试此操作之前，我建议您尝试寻找解决您情况的其他设计。

要根据元素属性调整模板，请参阅this answer。

变量值作为模板内的指令/控制器名称（使用$ compile / $ interpolate）？

1 个答案: