How to use the replace feature for custom AngularJS directives

Question

Why does replace true or replace false not have any impact in the code below   Why isn t the  some existing content  being displayed when replace false   Or putting it more humbly  can you kindly explain what is the replace true false feature in directives and how to use it   Example  JS Angular    lt script gt      angular module  scopes                  controller  Ctrl   function  scope                     scope title    hello                            directive  myDir   function                 return                 restrict   E                 replace  true                template    lt div gt   title   lt  div gt                             lt  script gt    HTML    lt div ng-controller  Ctrl  gt       lt my-dir gt  lt h3 gt some existing content lt  h3 gt  lt  my-dir gt   lt  div gt    See it in Plunker here   http   plnkr co edit 4ywZGwfsKHLAoGL38vvW p preview

User · Accepted Answer

replace true is Deprecated From the Docs   replace   DEPRECATED    will be removed in next major release - i e  v2 0  specify what the template should replace  Defaults to false   true - the template will replace the directive s element  false - the template will replace the contents of the directive s element    -- AngularJS Comprehensive Directive API From GitHub   Caitp-- It s deprecated because there are known  very silly problems with replace  true  a number of which can t really be fixed in a reasonable fashion  If you re careful and avoid these problems  then more power to you  but for the benefit of new users  it s easier to just tell them  quot this will give you a headache  don t do it quot    -- AngularJS Issue  7636  Update  Note  replace  true is deprecated and not recommended to use  mainly due to the issues listed here  It has been completely removed in the new Angular   Issues with replace  true  Attribute values are not merged Directives are not deduplicated before compilation transclude  element in the replace template root can have unexpected effects  For more information  see  AngularJS  compile Service API Reference - Issues with replace true

User · Answer

When you have replace  true you get the following piece of DOM    lt div ng-controller  Ctrl  class  ng-scope  gt       lt div class  ng-binding  gt hello lt  div gt   lt  div gt    whereas  with replace  false you get this    lt div ng-controller  Ctrl  class  ng-scope  gt       lt my-dir gt           lt div class  ng-binding  gt hello lt  div gt       lt  my-dir gt   lt  div gt    So the replace property in directives refer to whether the element to which the directive is being applied   lt my-dir gt  in that case  should remain  replace  false  and the directive s template should be appended as its child   OR  the element to which the directive is being applied should be replaced  replace  true  by the directive s template   In both cases the element s  to which the directive is being applied  children will be lost  If you wanted to perserve the element s original content children you would have to translude it  The following directive would do it    directive  myDir   function         return           restrict   E           replace  false          transclude  true          template    lt div gt   title   lt div ng-transclude gt  lt  div gt  lt  div gt                In that case if in the directive s template you have an element  or elements  with attribute ng-transclude  its content will be replaced by the element s  to which the directive is being applied  original content   See example of translusion http   plnkr co edit 2DJQydBjgwj9vExLn3Ik p preview  See this to read more about translusion

[angularjs] How to use the 'replace' feature for custom AngularJS directives?

`replace:true` is Deprecated

Update

Issues with replace: true

Examples related to angularjs

Examples related to angularjs-directive