Angular JS：替换指令中的属性答案

【问题标题】：Angular JS : replace property in directiveAngular JS：替换指令中的属性
【发布时间】：2016-03-04 10:52:59
【问题描述】：

在 Angular JS 中，我们有一个名为 replace 的属性，在定义指令时可以将值设置为 true 或 false。但我不明白这个属性将如何使用。设置为true时是否会替换HTML父元素

【问题讨论】：

它将用你的指令模板替换你放置指令的DOM元素。
我见过的最好的解释是SO: Angular directive replace=true
Angular directive replace=true的可能重复

标签： angularjs angularjs-directive directive

【解决方案1】：

实际模板：

<div class="parent">
 <my-dir><div>Hello world!!</div></my-dir>
</div>

如果replace为true，mir-dir标签将被移除。

 <div class="parent">
    <div>Hello world!!</div>
    </div>

如果replace为false，mir-dir标签不会被移除。

 <div class="parent">
     <my-dir><div>Hello world!!</div></my-dir>
    </div>

希望你明白！！如果您有任何疑问，请告诉我。

【讨论】：

【解决方案2】：

替换 - 如果设置为 true，则将使用模板替换具有指令的元素。

PS：你必须使用 templateUrl/template 和 replace。

HTML

<div angular></div>
<div class="angular"></div>
<angular>Simple angular directive</angular>

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

App.directive('angular', function() {
  return {
    restrict: 'ECMA',
    replace: true,
    template: '<img src="http://goo.gl/ceZGf"/>'
  };
});

以上示例角度指令将其内容“简单角度指令”替换为模板中的内容，即“替换内容”。

【讨论】：

【解决方案3】：

根据angular的documentation（替换选项）：

true - 模板将替换指令的元素。

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

假设您有一个名为 my-directive 的指令，其模板为 <span>directive</span>，而您的 html 代码为 <div my-directive></div>。然后replace : false 的结果是：

<div my-directive><span class="replaced" my-directive="">directive</span></div>

而replace : true 的结果是：

<span class="replaced" my-directive="">directive</span>

请注意，此选项已弃用。

Explain replace=true in Angular Directives (Deprecated)

【讨论】：