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

score 180 · Accepted Answer · edited Apr 04 '14 at 20:07

180

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.

edited Apr 04 '14 at 20:07

Jim Aho

9,932
15
56
87

answered Mar 08 '13 at 03:49

checketts

14,167
10
53
82

What about transclude: 'element'. It seems to do the same thing as replace: 'true' when using ng-transclude. – CMCDragonkai Feb 26 '14 at 12:06
Is replace: false, the same as not using replace at all? – Neil Mar 19 '14 at 13:25
1

@Neil Yes. Leaving it off is the same as `false` – checketts Mar 19 '14 at 15:33
@CMCDragonkai 'replace' should have a template defined, 'transclude' need not? – srikanth Nutigattu Mar 13 '15 at 13:17
A good example of when you would use `replace` and `transclude` together is if you wanted to add an `ng-click` or some other directive within the directive vs markup – Roi Apr 22 '15 at 23:17
11

`replace` is now deprecated – Robert May 21 '15 at 11:24
2

@Robert does 'replace' would have a replacement or is it gone for good? – cirovladimir May 21 '15 at 14:37
@cirovladimir, see here: http://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs – John Rix Jul 26 '16 at 22:24

score 12 · Answer 2 · answered Mar 08 '13 at 03:51

As the documentation states, 'replace' determines whether the current element is replaced by the directive. The other option is whether it is just added to as a child basically. If you look at the source of your plnkr, notice that for the second directive where replace is false that the div tag is still there. For the first directive it is not.

First result:

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

Second result:

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

score 5 · Answer 3 · answered Jun 06 '14 at 06:42

5

Replace [True | False (default)]

Effect

1.  Replace the directive element.

Dependency:

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

answered Jun 06 '14 at 06:42

user3454062

171
2
1

score 0 · Answer 4 · answered May 25 '14 at 16:13

0

Also i got this error if i had the comment in tn top level of template among with the actual root element.

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

answered May 25 '14 at 16:13

Konstantin Isaev

642
8
14

How to use `replace` of directive definition?

4 Answers4

Linked