0

我正在创建一个指令,我需要在该模板中使用作用域的变量值作为要加载的指令(或控制器)的名称。

假设我有一个指令小部件,它有一个名为 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。Saywidget.type的值为weather. 然后应该首先对第一行进行插值,使其看起来像(无论是否插入了类属性、widget.type-attr 或 ng-controller)

<div class="widget" weather>

然后编译包含天气指令。

如何widget.type在模板中进行插值?

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

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

见 plunkr

4

1 回答 1

0

您只能将插值表达式放置在文本节点和属性值中。AngularJS 通过首先将其转换为 DOM,然后调用指令编译等来评估您的模板。如果您尝试使用 place{{...}}而不是属性name,您最终会得到混乱的 DOM。

如果您确实需要根据$scope变量值替换整个指令,则需要创建一个指令以应用其他指令并执行一些繁重的$compile工作(每次值更改时都必须完全重新编译模板)。我建议在尝试此操作之前尝试找到解决您的情况的其他设计。

要根据元素属性调整模板,请参阅此答案

于 2014-12-18T11:36:01.673 回答