How can we achieve transclusion in AngularJs?

0 votes
I want to know the concept of transclusion in angularJS and how can we achieve transclusion in Javascript?
Feb 5 in Angular by kartik
• 10,990 points
38 views

1 answer to this question.

0 votes

Hii, 

In order to know what transclusion is you can refer to this link- Transclusion.

However, to achieve transclusion you can use ng-transclude model in div tag and additional attribute transclude:true in directive.

For Example:

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',                         

                       transclude:true

                     }

});

Note about transclude:true

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 ng-transclude></div>

</div>

This into.html content is injected to controller file along with message directive( This is know as transclusion). 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>This is inner message</div>

                    </div>

         </div>

</body>

The Flow of this senario is shown below:

answered Feb 5 by Niroj
• 22,110 points

Related Questions In Angular

0 votes
1 answer
0 votes
1 answer

How do we work with UI-Router in AngularJS?

Hello @kartik,  As you know Ui-Router is more ...READ MORE

answered Feb 11 in Angular by Niroj
• 22,110 points
47 views
0 votes
1 answer

How can we specify no route path in UI-Router?

hey @kartik, In order to route to any ...READ MORE

answered Feb 11 in Angular by anonymous
• 22,110 points
34 views
0 votes
1 answer

How compile, controller, pre-linking and post linking works in Angularjs?

Explanation of compile and link process don't ...READ MORE

answered Jan 31 in Angular by Niroj
• 22,110 points
59 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
• 22,110 points

edited Jan 21 by Niroj 67 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
• 22,110 points

edited Jan 21 by Niroj 55 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
• 22,110 points
358 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
• 22,110 points

edited Jan 21 by Niroj 52 views
0 votes
1 answer

How can we achieve transclusion using link function and directive controller?

Hey, The Term Transclusion means unhidding the context ...READ MORE

answered Feb 5 in Angular by Niroj
• 22,110 points
47 views
0 votes
1 answer

How can we reload a page after requesting the same get parameter using AngularJS?

hey kartik, The reason for this is that ...READ MORE

answered Feb 10 in Angular by Niroj
• 22,110 points
660 views