如何使用指令定义的`replace`？(How to use `replace` of direct

在该文件中： http://docs.angularjs.org/guide/directive ，它说，有一个replace的指令配置：

模板 -与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标签确实被更换。

Answer 2:

如文档状态，“替换”判断当前元素是否由该指令所取代。另一种选择是，无论是刚刚加入到作为一个孩子基本。如果你看看你plnkr的来源，发现了第二个指令，其中取而代之的是假的div标签仍然存在。对于第一个指令，它不是。

第一个结果：

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

第二个结果：

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

Answer 3:

更换[真| False（默认值）]

影响

1.  Replace the directive element.

相关性：

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

Answer 4:

另外，如果我曾与实际的根元素中模板的TN顶层的评论我得到这个错误。

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

文章来源: How to use `replace` of directive definition?