Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Transclusion Changes in AngularJS 1.2.x

    Transclusion Basics

    John LindquistJohn Lindquist

    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...



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.