0

对于我的项目，我要求定义不修改 DOM 的指令，也不在 DOM 中留下它们存在的工件。我似乎无法使用 AngularJS 完成这项工作。

考虑这些例子：

<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>

相关指令定义如下：

var module = angular.module( 'component', [] );

module.directive('emptyArg', function() {
    template: '', 
    replace: true, 
    scope: false, 
    link: function() { // ... }
};

module.directive('nullArg', function() {
    template: null,
    replace: true,
    scope: false,
    link: function() { // .... }
};

编译后，我希望生成的 DOM 元素如下所示：

<div></div>
<div></div>

但是缺少模板似乎会导致 AngularJS 忽略替换请求，从而使生成的 DOM 元素看起来像这样：

<div empty-arg="some-param"></div>
<div null-arg="another-param"></div>

如何强制 AngularJS 在编译后的 DOM 中删除这些属性？

一个 jsFiddle 展示了这一点，可以在这里找到：

http://jsfiddle.net/vankirkc/ezN3M/34/

更新：

可以在创建后删除创建的属性，但我真正要寻找的是某种利用模板定义参数来拦截 DOM 元素的创建的方法，这样它就不会复制此指令。看来这在 1.0.3 版中是不可能的。

4

2 回答 2

1

实际上 "empty-arg" 和 "null-arg" 只是 DOM 元素的普通属性，AngularJS 使用它们来标记要在元素上应用哪些指令。

因此，如果一个指令将从 DOM 元素中删除属性，那实际上会很糟糕。例如 - 可以编写另一个指令来使用此属性来修改其行为：在不同的 AngularJS 库中，您可以看到，控件使用ngModel属性来获取绑定元素的表达式。

而且由于这些属性已经存在于 DOM 树中，删除它们将导致 DOM 树修改并可能暗示性能问题。

如果您仍然真的想删除这些属性，您可以尝试修改链接函数的第二个参数：

attrs.$set('empty',undefined);

但通常我不建议这样做：您可以节省一些内存（但我不确定它是否会被保存 - 我认为它应该进行基准测试），但由于 DOM 树会被修改，您会获得更长的加载时间。

但无论如何，这里是 Fiddle来证明这是可能的。

于 2013-01-10T20:34:31.473 回答
1

如果要删除所有属性，可以在编译函数中进行：

for(var i=0; i < tElement[0].attributes.length; i++){
    tElement.removeAttr(tElement[0].attributes[i].name)
};

小提琴。

更新：正如@Josh 在评论中指出的那样，删除属性本质上会使其成为仅运行一次的指令，并且在链接函数中没有任何属性可用，这使得这个答案成为非答案/非解决方案.

于 2013-01-10T21:51:37.420 回答