What is the relation between transclusion scope and directive inherited scope in AngularJS

0 votes

hii,

I want to know what's the concept behind directive inherited scope and what's make it different from directive shared scope and its relation with transclusion scope?

Feb 6, 2020 in Angular by anonymous
• 37,520 points
1,022 views

1 answer to this question.

0 votes

hey,

Let me help you out with the following piece of code assuming that we have a final code after being transclusion:

(If you want to know how this  sample final code is achieved you can first check it out the link- Transclusion)

 <div ng-controller='emp'>
           Some  message from controller
                <div message>
                             This is from msg template
                             <div>This is inner message</div>                               
                </div>
  </div>

From above it is clear that there is only one controller named emp and directive named message in it which has a transclude text embed in it.

So, first the parent scope i.e controller scope is made available through the entire cycle and as we have mentioned directive inherited scope it is going to have its own scope object's. However, it is going to have its scope object directly made available through inheritance from the parent element and also it can have its own member as well but those member are only available through directive scope only and are not access through controller scope. 

Now, we were having a transclusion scope which is having new instance independent of its parent scope and this particular instance is inherited from its parent scope or can say the parent of the directive scope. As it inherit the controller scope, so all data member is available in the transclusion scope and another special things to be remember when an new instance of transclusion is created there is always $parent member is associated with the transclusion scope along with parent's data memeber. In this case $parent is going to refer the directive scope  but not to the controller scope. This $parent is used to access the data member of the directive scope as well as controller scope.

The whole scenario from the above explanation can be depict from the diagram attached below.

If you want to know what makes directive inherited scope different from direct shared scope check it out the link given below:

Relation between transclusion scope and directive shared scope in AngularJS 

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

Related Questions In Angular

0 votes
1 answer

What is inherited/child scope in directive?

Hey kartik, As you use the term inheritance ...READ MORE

answered Feb 5, 2020 in Angular by Niroj
• 82,880 points
1,158 views
0 votes
1 answer

What is the difference between Call back transclusion function and no call back transclusion function?

Hey,    There is no difference between clone linking and ...READ MORE

answered Feb 5, 2020 in Angular by Niroj
• 82,880 points
611 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
774 views
0 votes
1 answer

What is the service that is used to configure the UI-Router and ngRoute in AngularJs?

Routing comes into play whenever you want ...READ MORE

answered Feb 11, 2020 in Angular by anonymous
• 82,880 points
516 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,157 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,447 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
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