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    lt span gt directive template1 lt  span gt        replace  true          app directive  myd2   function      return       template    lt span gt directive template2 lt  span gt        replace  false           html code   lt div myd1 gt    original content should be replaced  lt  div gt   lt div myd2 gt    original content should NOT be replaced  lt  div gt    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

User · Answer

Also i got this error if i had the comment in tn top level of template among with the actual root element    lt  -- Just a commented out stuff -- gt   lt div gt test of   value   lt  div gt

User · Answer

Replace  True   False  default       Effect   1   Replace the directive element        Dependency    1  When replace  true  the template or templateUrl must be required

User · Answer

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    lt span myd1    gt directive template1 lt  span gt    Second result    lt div myd2    gt  lt span gt directive template2 lt  span gt  lt  div gt

User · Answer

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  lt div myd1 gt  tag   http   plnkr co edit k9qSx15fhSZRMwgAIMP4 p preview  For example without replace true   lt div myd1 gt  lt span class  replaced  myd1    gt directive template1 lt  span gt  lt  div gt    and with replace true   lt span class  replaced  myd1    gt directive template1 lt  span gt    As you can see in the latter example  the div tag is indeed replaced

[angularjs] How to use `replace` of directive definition?

Examples related to angularjs

Examples related to angularjs-directive