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

在这个文档: 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

124611 次浏览
小开
最佳答案

您正在与 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 标记的确是 被取代了。

小开

正如文档中所说的那样，“替换”确定当前元素是否由指令替换。另一个选项是它是否只是作为一个子元素被添加到。如果查看 plnkr 的源代码，请注意，对于第二个指令，其中 place 为 false，div 标记仍然存在。对于第一个指令，它不是。

第一个结果:

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

第二个结果:

<div myd2=""><span>directive template2</span></div>
小开

而且我得到了这个错误，如果我有在顶层的注释与实际的根元素模板。

<!-- Just a commented out stuff -->
<div>test of \{\{value}}</div>
小开

替换[ True | False (默认)]

效果

1.  Replace the directive element.

依赖性:

1. When replace: true, the template or templateUrl must be required.

提交答案