Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Directive Communication

    John LindquistJohn Lindquist

    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.

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

    Discuss

    Discuss