This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

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

    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss