Directive Communication

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 183 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!



Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.




Edit

Directive Communication

4:28 AngularJS lesson by

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.

Find the code for this lesson on JSBin.

egghead.io comment guidelines

egghead.io
Avatar

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.

Alana
Avatar

Thank for this great tutorial on directive communication. I was wondering how the state directive would access it's own controller. Would it have to require it's own controller?

Albert
Avatar

When you define your directive, you always get access its own controller by returned object, just like link, you don't have to require its own controller at all.

Pablo
Avatar

How would you go about communicating down the hierarchy? I have had some limited success using $rootScope.$broadcast(), but I assume using $rootScope there should be avoided in favour of a specific $scope. However I cannot make that to work.

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.

Featured series:

Angular Automation with Gulp

Angular Automation with Gulp

Related lessons: