Directive to Directive Communication in AngularJS

John Lindquist: Let's talk about having directives talk to each other. This may seem a little strange at first, just bear with me. I'm going to gloss over some of the more advanced things in this. If you remember how we create an element directive, we restrict it to E, for element. I'm going to set up something in here for link function with element bind.

Mouse over, mouse enter. You've seen this before. Function. Then we're going to log something in there. What I'm going to do here is set up a controller for the directive, which...this stuff will be new for this video. This takes the typical scope. In our controller, we're going to build an API for other directives to talk to this one.

For example, this dot, add strength as a function, and then we'll say scope abilities, push strength. I actually have to create that scope abilities array first. We'll say, this dot adds speed as a function, add scope abilities, push speed. Then this dot, let's do flight. Add flight, scope abilities, push flight.

You may see where I'm going with this. Whenever we roll-over this guy, we're just going to say, console log, scope, dot, abilities. All right, we've set up our element directive, which wouldn't do anything right now, so I'm not going to show it. I'll just show it real quick right here. It would look something like this. That's all we have set up, but it wouldn't do anything.

What we can do is set up some other directives here. We'll say, this is the speed directive. We get strength first, let's do that. Looks like I misspelled strength up there. All right, strength, speed. Let's go back down here. Strength is going to return, and this is going to use the...Something that's new here, it's going to say require, and it's going to talk to the superhero directive.

It's going to require the superhero. What that's going to do, it's going to give us access to, in the linking function. It's going to give us access to the controller of that other directive. Scope, element, attributes, then we can reference these superhero controller. You can name that whatever you want. It will pick it up just because it's the fourth parameter there.

From the superhero controller, we can say, super controller, add. Let's see, this one is strength. If we make a few copies of this...This one we'll say, speed. We'll do speed, and then flight. Scroll down a little bit. Here we'll do, flight. If you can see what's going on, we set up a superhero element. Set up a controller that has an API of add strength, add speed, add flight.

These other directives, which are going to be attributes wherever they default to attributes, are going to require the superhero directive, which will give as access to that controller. In the linking function, I'll say superhero add strength through the strength directive, add speed with the speed directive, and add flight for the flight directive.

What that would look like in here, we'll just do flight, speed, strength, and we'll say this guy is Superman. If everything went well here, once we roll-over this, you'll see flight, speed. Strength is what it logs out. That's because it added each of these, called the API, add speed, add strength, add flight. Push those onto the abilities. Then we log out all the abilities.

That one got you here that's advanced, and we'll get more into it in later videos, but I think I'll point it out now for a good measure. If I were to do this and say, The Flash. Let's make these look a little bit different, we'll just say, element, add class button. This one leaves a button class of the foundation library.

I made two copies to see if I roll-over The Flash, it will say speed. If I roll-over Superman, it's going to say speed. This is because it hasn't created an isolate scope, an "isolate" scope is what it's called -- isolated the scope from other scopes. All we're going to do here is say, scope pass the near object.

That's going to say, keep the scope inside of the superhero, don't share it across, don't inherit from other scopes. This will keep it from overriding the properties of the previous scope. If you go, roll-over The Flash, we'll do speed. If I roll-over Superman, flight, speed, strength, it separates them from each other.

If you're going to do things like elements or reusable directives that are going to add properties or models on to the scope, make sure to create a few of them so that you know that they're not going to break each other. We'll add another one. Strength, let's say, the Hulk. The Hulk should have strength, if I spell it right.

The Hulk should have strength, flash, speed. Superman, flight, speed, strength. Hopefully that makes sense. I know I threw a lot in there. Just a quick review. Restricting to be an element, the scope isolates it from the other directives so that those properties don't get over it, and the abilities don't get over it.

There's a controller property here that we can add a controller to build an API for the other directives to access using this dot, whatever. Just add strength, add speed, add flight. This we've seen multiple times already. This linking the scope and element, and all that stuff together.

These other directives, they are just attributes that require, that's the property reason here, the other directive that you're using that can be any directive. It doesn't have to be an element directive. It can be another attribute directive. It's something to play with if you have a free Saturday night. Just access that controller from the fourth parameter, and you are all set to go.