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,530 points
140 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
333 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
152 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
253 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
452 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 294 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 341 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,970 points
54,494 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 313 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
377 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
9,813 views