How to use `replace` of directive definition?
angularjs, angularjs-directive
Solution
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.
Problem
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