How to use `replace` of directive definition?

Question

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

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?

Live demo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Answer 1

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

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.

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

For example without replace:true

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

and with replace:true

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

As you can see in the latter example, the div tag is indeed replaced.