在Angular Js中transclude:true和replace:true之间的基本区别

时间:2014-11-20 14:42:43

标签: javascript angularjs

嘿,我是角度js的新手,所以我正在通过角度js.org文档来制作自定义指令。我想知道transclude和replace之间的基本区别。 我看过几个例子,他们使用了transclude:true和replace:对于自定义指令是真的。

很抱歉,如果这是角度js的基本问题。只是让我的基础知识清晰。

1 个答案:

答案 0 :(得分:19)

当您使用转化时,您将在页面上包含自定义标记内可用的任何html。例如,如果你有:

<person><p>some text</p></person>

段落标记将包含在您拥有的地点:

template: '<div ng-transclude></div>',

所以你对页面的输出会显示为:

<div><p>some text</p></div>

replace:true只表示模板中的输出完全取代了页面上的html。所以你将不再看到标签(例如,如果你看了html源代码)。如果您不使用repace:true,您在屏幕上看到的内容是相同的,但如果您查看您的html输出,您将看到有关您自己的标签的信息。

没有替换html输出就是这样:

<person class="ng-isolate-scope"><div ng-transclude=""><p class="ng-scope">some text</p></div></person>

使用替换html输出将是:

<div ng-transclude="" class="ng-isolate-scope"><p class="ng-scope">some text</p></div>