Question

是否可以（我猜它是）动态更改指令的模板，具体取决于某些因素？

所以，我看到理论上它是如何可能的 - 你可以预先将所有不同的模板放入$ templateCache中，并在指令编译期间检索你需要的模板

类似的东西：

restrict:'E'
scope:
    data:'='
    template:'='
link:(scope, elem, attrs)->
    html = $templateCache.get(scope.template)
    tElement.html(html)

但真正的问题是，这样做是否正确？这会严重影响性能吗？例如，如果指令用作大网格中的单元格？

Answer 1

在指令之间切换是一种不好的做法。

为什么：

让我们假设您有一个DropDown菜单（<select>），并且您已设置了几个指令，每个指令都链接到其选项（ngModel）。

当应用程序运行时，

您将从<select>属性的默认值设置初始指令开始，当您尝试替换该值时，您必须从DOM和“{1}}”删除指令“写”使用新的。

到现在为止，这听起来像是jQuery。

我应该做什么：

嗯，你几乎为自己回答：使用ng-switch。

ng-switch by AngularJS

备注：

1）可以在指令模板之间切换（按照你提到的方式，在背景上设置几个模板，然后根据用户交互加载最适合的模板），但听起来像你即将打字严重 Spaghetti Code 这将很难维持。

2）性能：我不知道这是否会严重影响应用程序的性能，但它肯定会更难维护。

3）如果ng-switch不适合那里，你应该以不同的角度看待这个问题。

修改

是的，通常会这样做：我已经在几个项目中完成了这项工作。

您必须将函数传递给新.directive的模板属性。例如：

templateUrl: function (elem, attrs){ return attrs["template"] == "table" ? "tableTemplate.html" : "listTemplate.html"; }

这意味着：您必须在新指令中添加所谓的“支持”属性。在这种情况下，我称之为模板。

看起来像这样：<div new-directive="data" template="table"></div>

动态切换指令的模板

1 个答案: