Angular JS：替换指令中的属性

Question

在angular JS中，我们有一个属性，在定义指令时有一个名为replace的可能值为true或false的属性。但我不明白这个属性将如何使用。当它被设置为true

Answer 1

实际的模板将取代HTML父元素：

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

如果更换是真，MIR-dir的标签将被删除。

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

如果更换是假，MIR-dir的标签将不会被删除。

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

希望你能理解!!让我知道你是否有任何疑问。

Answer 2

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

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

HTML

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

JS

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

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

上面的例子角指令将通过模板即 “更换的内容” 内容替换其内容 “简单的角度指令”。

Answer 3

据角（替换选项）的documentation：

真 - 模板将取代指令的元素。

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> 

请注意，此选项已被弃用。

查看相关问题：

How to use `replace` of directive definition?

Explain replace=true in Angular Directives (Deprecated)