What is transclusion in AngularJS

0 votes
What is the concept behind transclusion of (directive and template) and (directive,content and template) in AngularJs?
Feb 5, 2020 in Angular by anonymous
• 37,510 points
578 views

1 answer to this question.

0 votes

Hey,

Let me explain you about transclusion from a senario.

Consider the following code:

controller file

<body ng-app="app">

         <div ng-controller='emp'>

                  This is a message from controller

                   <div message>

                              This is inner message

                    </div>

         </div>

</body>

From above it is clear that there is only one controller named emp and directive named message in it.

Now let us define the directive message

message Directive

app.directive("message",function(){

            return{

                       templateUrl:'into.html'

                     }

});

Here, message directive contain the file named into_html which is having some content in it. Let the file into_html is defined as under:

into.html

<div>

     This is template context

</div>

This into.html content is injected to controller file in respective message directive. Finally the output file can be consider as follow:

 Final controller file

<body ng-app="app">

         <div ng-controller='emp'>

                  This is a message from controller

                   <div message>

                              This is template context

                    </div>

         </div>

</body>

 Here, you  should notice that in final controller file has replaced the message directive context  "This is inner message" with info.html context.

For your reference follow the image attached below:

So if the final controller file contain both hidden as well as the template context in it ,that is know as transclusion.

final transclusion controller file.



<body ng-app="app">

         <div ng-controller='emp'>

                  This is a message from controller

                   <div message>
                             This is inner message

                             
                              <div>
                              This is template context

                              </div>                                

                    </div>

         </div>

</body>

If you want to know how transclusion is achieve refer this- Achieve_Transclusion

answered Feb 5, 2020 by Niroj
• 82,880 points

edited Feb 5, 2020 by Niroj

Related Questions In Angular

0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

What is $watch() and it's use in AngularJS?

$watch() function is used to watch the ...READ MORE

answered Feb 3, 2020 in Angular by anonymous
• 82,880 points
2,119 views
0 votes
1 answer

What is $parse in Angularjs

Before we jump into the topic you ...READ MORE

answered Feb 4, 2020 in Angular by Niroj
• 82,880 points
2,234 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 780 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 955 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,910 points
118,349 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 2,444 views
0 votes
1 answer

What is transclusion Scope in AngularJs?

hey @kartik, Let me start with What is ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,880 points
540 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP