Hey I am new to angular js , So i was going through the angular js 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.

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.

• javascript
• angularjs

• Could you add at least one of those examples? – Pavlo Commented Nov 20, 2014 at 14:50
• @Pavlo : I was referring about this link: angular-tips.com/blog/2014/03/transclusion-and-scopes – Angular Learner Commented Nov 20, 2014 at 15:03

1 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>