为什么 AngularJS 指令中不推荐使用`replace` 属性？
更新
其中一位合作者表示不会删除它，但不会修复已知错误。 https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb#commitcomment-8124407
原来的
这是此更改的提交：https : //github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb
replace用于定义替换它们所在元素的指令的标志将在下一个主要 angular 版本中删除。此功能具有困难的语义（例如，如何合并属性）并且与其解决的问题相比会导致更多问题。此外，对于 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);
};
}
};
});
来自 GitHub：
Caitp--它已被弃用，因为 存在已知的非常愚蠢的问题
replace: true，其中许多问题无法真正以合理的方式修复。如果您小心并避免这些问题，那么您将获得更多权力，但为了新用户的利益，告诉他们“这会让您头疼，不要这样做”会更容易。
replace:true 已弃用
从文档：
replace（[已弃用！]，将在下一个主要版本中删除 - 即 v2.0）指定模板应替换的内容。默认为
false.
true- 模板将替换指令的元素。false- 模板将替换指令元素的内容。
我想说它已被删除是一件好事，因为它可以防止您将指令（组件）的内部工作暴露给外部世界。将您的模板视为影子 DOM，并将您的指令与普通 HTML 元素（如按钮）进行比较。当您悬停或单击它们时，您不会看到所有类型的类被添加和样式应用于这些元素。这一切都“隐藏”在里面。因为目前对 shadow DOM 的支持有些有限，所以它是一种变通方法，但它已经使您能够成为未来的证明。