如何使用指令定义的“替换”？

Question

在本文档中：http :
//docs.angularjs.org/guide/directive，其中说到replace指令有一个配置：

template- 用HTML的内容替换当前元素。替换过程将所有属性/类从旧元素迁移到新元素。有关更多信息，请参见下面的“创建组件”部分。

JavaScript代码

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML代码

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

但是最后一页看起来像：

directive template1
directive template2

似乎replace不起作用。我想念什么吗？

现场演示：http：//plnkr.co/edit/rGIgmjO81X2UxJohL4HM？p
= preview

Answer 1

您会与混淆transclude: true，后者会附加内部内容。

replace: true表示指令模板的内容将替换在其上声明指令的元素，在本例中为<div myd1>标签。

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

例如 没有 replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

并 用 replace:true

<span class="replaced" myd1="">directive template1</span>

如您在后一个示例中看到的，div标签确实已 被替换 。