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, 2020 in Angular by kartik
• 37,520 points
630 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, 2020 by Niroj
• 82,880 points

Related Questions In Angular

0 votes
1 answer

How can we provide condition based on certain resolve result obtained in routing with resolve?

Hey,  Let me consider that you have some ...READ MORE

answered Feb 11, 2020 in Angular by Niroj
• 82,880 points
1,957 views
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, 2020 in Angular by Niroj
• 82,880 points
661 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, 2020 in Angular by anonymous
• 82,880 points
1,148 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, 2020 in Angular by Niroj
• 82,880 points
1,390 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 1,024 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 1,158 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,890 points
119,455 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,845 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, 2020 in Angular by Niroj
• 82,880 points
1,059 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, 2020 in Angular by Niroj
• 82,880 points
12,567 views
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