Directive Communication

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 11 years ago
Updated 6 years ago

In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

John Lindquist: If you create some directives, like a country, a state and a city, and you know there's are relationship between them, that hierarchical countries, state, city, that relationship you'd expect.

You can actually communicate between them using controllers. So if I set up a directive for my country, one for my city, and one for my state, I can actually tell if I create a control on my country. We'll say, "Controller function," and then, expose something like, "make announcement." We'll take a message and we'll say, "Console.log country says."

We can in-view directive to linking function of our city. We can inject the controller from the country into the linking function of our city. We just say, "Country controller." The way that that gets linked up is that you tell it to require a directive that exists above it, and that naming scheme country has to match with the country up here.

So at the point, we can say, "Country controller make announcement. Country says, 'This city rocks.'" If I open up the console over here, hit refresh and it'll say, "Country says, 'This city rocks, even though the city is two levels below the country."

We can do the same things in state. I'm actually going to move this state up here, because that's our higher key is in the Html.

We can create controller in our state as well. Say something like, "Make law and law console.log." Let me say the law is, "whatever you're passing." Then, we can also switch that over to the state and say to the country controller, we can change this. The name doesn't really matter, but we'll just say, "State controller make law jump higher."

That's a terrible spelling of higher. If we refresh, you can see the city is telling the state to make a new law to jump higher.

Now, there's actually a future here if we're passing an array, and we say we need the country and the state, this becomes an array of controllers where the second controller would be the -- yeah, the order is here, so let's just add zero.

This is acting one, so the controller here would be number one and then zero would be, "Make announcement from city." Then, you can see when I refresh, we have the city telling the country to make the announcement and the city telling the state to make the law.

This is, typically, for things like, you would actually be pushing data into an array or whatever to add more to an ng-repeat, or things like that. Rather than just logging out messages.

This would also work between the state and the country, because the state is beneath the country. So you could require the country here. Let's say, "Require country," and then, we could add a linking function.

Then, add the country controller and access anything there between the state and the country. So that's how the controller communication between directives works. It just requires the higher key, so it knows that one is always above the other.

James
James
~ 9 years ago

At around 1 min 25 sec specific syntax is used to require another directives controller. The "^" symbol is pre-pended to the directive name where the controller lives. This video seems to place emphasis on hierarchy on directives. If it is the case that "^" is used to denote some ancestor it would be nice if that was made explicit. Furthermore is there a different character for accessing the controller of a descendant directive at arbitrary depth ?

Joel Hooks
Joel Hooks
~ 9 years ago

At around 1 min 25 sec specific syntax is used to require another directives controller. The "^" symbol is pre-pended to the directive name where the controller lives. This video seems to place emphasis on hierarchy on directives. If it is the case that "^" is used to denote some ancestor it would be nice if that was made explicit. Furthermore is there a different character for accessing the controller of a descendant directive at arbitrary depth ?

The require: '^ctrlName' syntax in the directive definition object is used to signal a parent controller is required. The parent controller is then made available as in the link function as the fourth argument. This is useful for creating complex components that need to communicate state between siblings.

There are other accessors that you can learn about. They were out of scope for this basic lesson.

Markdown supported.
Become a member to join the discussionEnroll Today