This lesson describes fundamentals for creating custom directives (broken down into Components and Containers).  The component demonstrates how to use the service template to create a simple clock directive whereby AngularJS will bind with objects in the template property and access element attributes.  The component example will provide a demonstration of how you can nest components and containers, taking advantage of AngularJS transclusion capabilities.

Components and Containers

**John Lindquist**: I found a good way of explaining directives, is to break them into two categories; components and containers.

A component would be something like a clock matched with a timezone, we'll say it's MST, and then we'll create our directive here, app, clock, restricted to an element. Scope where we let the time zone come in as a string and then the template can be something simple that just displays a div that binds, we'll do 12 PM, and then binds to the timezone. If we look at that it's just 12 p.m. MST, MST is coming in from that attribute. So that's a component just display the data you pass into the attributes and that's all you have to worry about.

Now a container would be something like a panel where you'd pass in an attribute like "I'm a title" and when you create this panel, you'd say again app, panel, restrict, E, scope. This time we're passing in a title as a string, and then our template is gonna look a little bit different this time.

We'll have a div, which is just going to be, well, let's just fake a style here. Order, 3 pixels, all black. We'll put some stuff inside of our container, the first thing will be the title we passed in, so create another div. This'll have a class of, I don't know, all our boxes are title-ish, and then we'll pass in the title. For your refresh, you can see we have this black border in the title thing. Let's break that into a couple lines.

Now that we have the title, separate that there as well, we can also add content underneath of it. Underneath the title itself. What we can do here is actually add a component inside of the container, so say timezone is PST this time. We can add that content in using transclusion by simply saying transclude true. When you create our div in here you just say N G transclude, and that'll yank the content, again, out from here and then paste it in our copy paste, however you want to think of it, to wherever you drop that.

Now we have what I like to call containers, where we've created this panel component which is everything. We can separate these just by cheating. So we have the regular component, just up there at the top, which is just displaying the time with the timezone attribute. We have a container component, which has it's own attribute just for the title, but then it also allows you to put in any sort of components or any other data you want to pass in and any linings or anything you want to pass in, simply by using transclusion to drop it inside of what your component is going to be.

Hopefully that explains conceptually, the way of approaching directives, one way of building reasonable components which just display a data through the attribute, but nothing inside of those tags, and then containers which allow you to pass additional content into the container. Say for example, if I were to duplicate this, and add a few more clocks, you can see I have two panels, each of them have different content inside of the containers, and transclusion allows us to modify the content inside of the containers.

Components and Containers

Share this video with your friends