Basic Difference Between transclude : true and replace: true in Angular Js

Question

Hey I am new to angular js , So i was going through the angular js.org docs for making a custom directive.I wanted to know the basic difference between transclude and replace. I have seen few examples where in they have used transclude: true and replace: true for a custom directive.

Sorry if it's a basic question in angular js . Just making my basics clear.

Answer 1

When you use transclude, you are including any html that is available inside your custom tags on your page. For example, if you had:

<person><p>some text</p></person>

the paragraph tag would be included in the spot where you have:

template: '<div ng-transclude></div>',

so your output to the page would read:

<div><p>some text</p></div>

The replace:true just means that the output in your template completely replaces the html on your page. So you would no longer see the tags (for example if you looked at the html source code). If you don't use repace:true, what you see on the screen is the same, but if you look at your html output you will see info about your own tags.

Without replace the html output would be this:

<person class="ng-isolate-scope"><div ng-transclude=""><p class="ng-scope">some text</p></div></person>

With replace the html output would be this:

<div ng-transclude="" class="ng-isolate-scope"><p class="ng-scope">some text</p></div>