javascript - transclude : true and replace: true in Angular Js之间的基本区别

Question

嘿，我是 angular js 的新手，所以我正在浏览 angular js.org 文档来制作自定义指令。我想知道 transclude 和 replace 之间的基本区别。我见过几个例子，其中他们使用 transclude: true 和 replace: true 作为自定义指令。

抱歉，如果这是 angular js 中的基本问题。只是让我的基础知识清楚。

Answer 1

当您使用 transclude 时，您将在您的页面上的自定义标签内包含任何可用的 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>