Angular JS : replace property in directive

Question

In angular JS, we have a property called replace with possible values as true or false while defining directive. But i dont understand how this property will be used. Will it replace the HTML parent element when it is set true

It will replace the DOM element where you put your directive by the template of your directive. — Walfrat, Mar 04 '16 at 11:01
The best explaination I have seen is [SO: Angular directive replace=true](http://stackoverflow.com/a/22498024/5535245) — georgeawg, Mar 04 '16 at 11:10
Possible duplicate of [Angular directive replace=true](http://stackoverflow.com/questions/22497706/angular-directive-replace-true) — georgeawg, Mar 04 '16 at 11:11

score 0 · Answer 1 · answered Mar 04 '16 at 11:01

Actual template:

<div class="parent">
 <my-dir><div>Hello world!!</div></my-dir>
</div>

if replace is true, mir-dir tag will be removed.

 <div class="parent">
    <div>Hello world!!</div>
    </div>

if replace is false, mir-dir tag will not be removed.

 <div class="parent">
     <my-dir><div>Hello world!!</div></my-dir>
    </div>

Hope you understand!!. let me know if you have any queries.

score 0 · Answer 2 · answered Mar 04 '16 at 11:04

Replace - If set to true will replace the element having a directive on it with a template.

PS : You have to use templateUrl/template along with replace.

HTML

<div angular></div>
<div class="angular"></div>
<angular>Simple angular directive</angular>

JS

var App = angular.module('App', []);

App.directive('angular', function() {
  return {
    restrict: 'ECMA',
    replace: true,
    template: '<img src="http://goo.gl/ceZGf"/>'
  };
});

Above example angular directive will replace its contents "Simple angular directive" by contents in template i.e "Replaced content".

score 0 · Answer 3 · edited May 23 '17 at 12:23

According to the documentation of angular (replace option):

true - the template will replace the directive's element.

false - the template will replace the contents of the directive's element.

Imagine you have a directive named my-directive with the template <span>directive</span> and your html code is <div my-directive></div>. Then replace : false results in:

<div my-directive><span class="replaced" my-directive="">directive</span></div>

And replace : true results in:

<span class="replaced" my-directive="">directive</span>

Please note that this option is deprecated.

See related questions:

How to use `replace` of directive definition?

Explain replace=true in Angular Directives (Deprecated)

Angular JS : replace property in directive

3 Answers3