AngularJS指令什么意思是替换和转换？

Question

有人可以解释一下是什么意思：

replace: true / false

和

transclude: true / false

在angularjs指令中？

我确实阅读了文档，但可以100％理解。

Answer 1

替换

每当你说replace: true时，你告诉你的指令用指令模板替换你的指令标签。

假设您在指令中使用template: '<div>This is directive template</div>'看起来像<div data-my-directive></div>当您运行应用程序时，DOM中的所有指令div将被<div>This is directive template</div>替换

然而，在同一场景中，如果您声明replace: false您的DOM将具有类似的内容

<div data-my-directive>
    <div>This is directive template</div>
</div>

TRANSCLUDE

您使用ng-transclude，要在视图的控制器中附加指令模板中的数据。

假设你的指令中有模板，看起来像是

template: '<div class="main"><div data-ng-transclude></div></div>'

因此，当您设置transclude: true时，您明确告诉您的指令在DOM加载时允许所有被转换的值成为指令本身的一部分。

假设您在视图中使用了这样的指令：

<div data-my-directive>
    Transcluded data
</div>

您会在网页中看到文字Transcluded data，但是如果您设置了transclude: false，您将看不到文字Transcluded data

Answer 2

为了简单起见：

替换true会将您的指令模板替换为您调用指令的标记：

<my-directive></my-directive>

如果替换为真，则变为：

<div>bla bla</div>

如果replace为false将变为：

<my-directive><div>bla bla</div></my-directive> 

Transclude将“复制”指令中的任何内容，并将其附加到模板上的某个位置：

<my-directive>This is some content</my-directive>

如果transclude为true：

<my-directive>
   <div>bla bla</div>
   <span>This is some content</span> <!--for this to work your template needs to use the ng-transclude directive -->
</my-directive> 

如果transclude为false：

<my-directive>
    <div>bla bla</div>
</my-directive>