Javascript 为什么AngularJS指令中不推荐使用“replace”属性？

根据，指令的

replace

属性已被弃用，因此在将来，所有指令都将使用当前默认值

replace:false

这就消除了开发人员替换element指令的元素的能力，而不需要对该功能进行明显的替换

有关元素指令在使用和不使用

replace:true

时如何工作的示例，请参阅

---

为什么不推荐使用此有用属性而不进行替换？

更新

其中一位合作者表示不会删除它，但已知的bug不会被修复。

原创

以下是此更改的提交：

用于定义替换元素的指令的

replace

标志 在下一个主要版本中，它们将被删除。 此功能具有困难的语义（例如属性如何合并） 与它解决的问题相比，它会导致更多的问题。还有 WebComponents在DOM中有自定义元素是正常的

在我看来，维护支持是复杂性与效益的结合

显然，开发人员使用它的一个原因是，他们更喜欢注入语义正确的标记，从而取代了自定义指令标记

---

---

阅读该链接下方的评论，显然很多人希望它保留下来。

如果您担心下一版本中将删除

replace:true

，您可以使用

postCompile

功能复制该行为

/// Replace element with it's first child
Utils.replaceWithChild = function(element) {
    var child = angular.element(element[0].firstChild);
    Utils.mergeAttributes(element, child);
    element.replaceWith(child);
}

/// Copy attributes from sourceElement to targetElement, merging their values if the attribute is already present
Utils.mergeAttributes = function(sourceElement, targetElement) {
    var arr = sourceElement[0].attributes;
    for(var i = 0; i < arr.length; i++) {
        var item = arr[i];
        if(!item.specified)
            continue;

        var key = item.name;
        var sourceVal = item.value;
        var targetVal = targetElement.attr(key);

        if(sourceVal === targetVal)
            continue;

        var newVal = targetVal === undefined
            ? sourceVal
            : sourceVal + ' ' + targetVal;

        targetElement.attr(key, newVal);
    }
}

angular.module('test')
.directive('unwrap', function() {
    return {
        restrict: 'AE',
        templateUrl: 'unwrap.part.html',
        compile: function() {
            return function postCompile(scope, element, attr) {
                Utils.replaceWithChild(element);
            };
        }
    }; 
});

///将元素替换为它的第一个子元素
Utils.replaceWithChild=函数（元素）{
var child=angular.element（元素[0].firstChild）；
合并属性（元素、子元素）；
元素。替换为（子元素）；
}
///将属性从sourceElement复制到targetElement，如果该属性已存在，则合并其值
Utils.mergeAttributes=函数（sourceElement、targetElement）{
var arr=sourceElement[0]。属性；
对于（变量i=0；i

我认为删除它是件好事，因为它可以防止您将指令（组件）的内部工作公开给外部世界。将模板视为阴影DOM，并将指令与普通HTML元素（如按钮）进行比较。悬停或单击这些元素时，您不会看到所有类型的类都被添加，也不会看到样式应用于这些元素。都藏在里面了。由于目前对阴影DOM的支持有些有限，这是一种解决方法，但它已经使您能够经得起未来的考验。

来自GitHub：

它被弃用是因为

replace:true

中存在一些已知的、非常愚蠢的问题，其中许多问题无法以合理的方式得到解决。如果你小心地避免这些问题，那么你就会有更多的能力，但是为了新用户的利益，告诉他们“这会让你头疼，不要这样做”会更容易

--

replace:true

已弃用 从文档中：

replace

（[DEPRECATED！]将在下一个主要版本（即v2.0）中删除）

指定模板应替换的内容。默认值为

false

• true

  -模板将替换指令的元素

• false

  -模板将替换指令元素的内容

--

---

关于性能和/或简单性，请参见--

：如果不替换元素，它将保留元素的属性。我注意到angular确实定义了道具（而不是属性，它们被复制了），比如“ng-140261834652”。如果angular的其他部分可以获取对元素的引用，并且不必担心它会过时，那么在运行数据/视图更新时执行的交叉检查就会少很多。我只是想添加通过$（'selector'）进行替换。链接函数中的replaceWith（content）是一个非常简单的解决方案，尽管不如“replace:true”那么好。它还假设了jquery，不确定angular的jqLite是否支持replaceWith。最近，当我想通过指令将ng click动态添加到现有元素时，实际上我不得不使用它。最后的评论对我们来说是个好消息，替换不会被删除：）我在angularJS 1.3.0上，看起来它被删除了Edgar：它在1.3.0中没有被删除。我在替换自己时遇到了问题，甚至准备了一份PR来修复它们：。本PR的讨论主题包含了一些有趣的观点，关于替换为什么会中断以及如何解决它导致的一些问题。这令人失望。我发现，当指令模板是转置的，并且包含像ul | ol/li这样的层次依赖元素时，replace是必不可少的。我使用replace来确保用ul/li构建菜单之类的东西的指令的标记以实际有效的标记结束。我真的希望WebComponents（我没有做过太多的研究）有一个解决这样一个问题的替代方法。这不是一个好的解决方案，因为替换不推荐的概念而不是特性，我们通常没有任何css作为指令元素，那么我们看不到prim的任何效果