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 in Angular by anonymous
• 27,140 points
65 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 by Niroj
• 58,500 points

edited Feb 5 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 in Angular by anonymous
• 58,500 points
124 views
0 votes
1 answer

What is $parse in Angularjs

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

answered Feb 4 in Angular by Niroj
• 58,500 points
382 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 in Web Development by Niroj
• 58,500 points

edited Jan 21 by Niroj 125 views
+1 vote
1 answer

What is css box module?

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

answered Jan 20 in Web Development by Niroj
• 58,500 points

edited Jan 21 by Niroj 111 views
0 votes
1 answer

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

hii, visibility:hidden; and display:none are totally different used ...READ MORE

answered Jan 20 in Web Development by Niroj
• 58,500 points
6,153 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 in Web Development by Niroj
• 58,500 points

edited Jan 21 by Niroj 91 views
0 votes
1 answer

What is transclusion Scope in AngularJs?

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

answered Feb 6 in Angular by Niroj
• 58,500 points
43 views
0 votes
1 answer