Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Transclusion Basics

2:48 Angular 1.x lesson by

Transclusion Changes in AngularJS 1.2.x

This video was recorded with AngularJS 1.0.x and transculsion has changed in newer versions of Angular. When you run this code with AngularJS 1.2.x, you will notice that the transcluded markup completely replaces the contents of the element with the ng-transclude attribute. In previous versions, the transcluded markup would be appended.

Uh oh. Transclusion? What the heck? It's a big word, but it is actually a very simple concept. In this episode John shows you how transclusion is used in your AngularJS directives...

Get the Code Now
click to level up

Transclusion Changes in AngularJS 1.2.x

This video was recorded with AngularJS 1.0.x and transculsion has changed in newer versions of Angular. When you run this code with AngularJS 1.2.x, you will notice that the transcluded markup completely replaces the contents of the element with the ng-transclude attribute. In previous versions, the transcluded markup would be appended.

egghead.io comment guidelines

Avatar
egghead.io

Uh oh. Transclusion? What the heck? It's a big word, but it is actually a very simple concept. In this episode John shows you how transclusion is used in your AngularJS directives...

Avatar
yiling

In Angular 1.3.15, we have two options for the transclusion behaviour quote from angularjs doc:

  • true - transclude the content (i.e. the child nodes) of the directive's element.
  • 'element' - transclude the whole of the directive's element including any directives on this element that defined at a lower priority than this directive. When used, the template property is ignored.

John Lindquist: So what happens when you have a customer directive, its component, say, call it "panel" and then you put something like a "button" inside of your customer component. You haven't defined it yet, but your button look like that.

Once we define our directive, if it's a directive that we give a template, we call this panel return and strict to element. Then, you've got a template of "div" with a class of panel and this is a panel component..."Grey component."

If we are refreshing here, you can see that it has rendered out our template, yet our button that we defined in here, is completely disappeared because the template has pretty much overwritten and destroyed the content that was in there.

If you want that content to be carried over from the "DOM" into your "directive," what you need to do is set up something called "Transclusion." It's a very funky name for actually a pretty simple concept. You say "transclude true," I like to say it's going to yank this and basically, copy and paste it into wherever you design "NG Transclude."

If you say NG transclude on this element, it's going to append it into that div. It's taking it from the inside of where we defined it, basically, copied and pasted and dropped it into our component because we set transclude there and then added transclude to our element.

This is a pretty common scenario, as far as making your html markup very descriptive and declarative of what is going on. You probably run into this scenario quite a bit, and it's really easy to use.

There are some pretty advance cases around transclusion...That we will get into, like compiling phase and things like that. We will talk more about that as we get into our advance stuff. But for right now, this is pretty simple, so go ahead and start using it.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?