如何使用指令定义的`replace`？ [英] How to use `replace` of directive definition?

问题描述

在此文档： http://docs.angularjs.org/guide/directive ，它说，有对于一个指令替换的配置：

In this document: http://docs.angularjs.org/guide/directive , it says that there is a replace configuration for directives:

模板 - 随着HTML的内容替换当前元素。在更换过程中迁移所有的属性/类从旧元素新的。请参阅下面的创建组件部分获取更多信息。

template - replace the current element with the contents of the HTML. The replacement process migrates all of the attributes / classes from the old element to the new one. See the Creating Components section below for more information.

JavaScript的code

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 code

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

但最后的页面看起来像：

But the final page is looking like:

directive template1
directive template2

看来替换不起作用。难道我错过了什么？

It seems the replace doesn't work. Do I miss anything?

现场演示：<一href=\"http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=$p$pview\">http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=$p$pview

推荐答案

您感到困惑与 transclude：真正的，这将追加内部内容。

You are getting confused with transclude: true, which would append the inner content.

更换：真正的表示该指令模板的内容将取代元素的指令宣布，在这种情况下，＆LT; DIV myd1方式＆gt; 标签

replace: true means that the content of the directive template will replace the element that the directive is declared on, in this case the <div myd1> tag.

<一个href=\"http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=$p$pview\">http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=$p$pview

例如无 更换：真正的

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

和与 更换：真正的

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

你可以在后面的例子中看到，在div标签确实的替换的

这篇关于如何使用指令定义的`replace`？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！