84

在本文档中: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

4

4 回答 4

179

您对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 标签确实被替换了

于 2013-03-08T03:49:40.703 回答
12

正如文档所述,“替换”确定当前元素是否被指令替换。另一种选择是它是否基本上只是作为一个孩子添加。如果您查看 plnkr 的源代码,请注意对于第二个指令,其中 replace 为 false,div 标记仍然存在。对于第一个指令,它不是。

第一个结果:

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

第二个结果:

<div myd2=""><span>directive template2</span></div>
于 2013-03-08T03:51:27.790 回答
5

替换 [真 | 假(默认)]

影响

1.  Replace the directive element. 

依赖:

1. When replace: true, the template or templateUrl must be required. 
于 2014-06-06T06:42:42.940 回答
0

如果我在模板的顶级模板中与实际的根元素之间有注释,我也会收到此错误。

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
于 2014-05-25T16:13:34.177 回答