Directive Communication

AngularJS - Directive CommunicationAngularJS Video Tutorial by John 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.


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.
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.


index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="stylesheet" href="vendor/foundation/foundation.min.css">
</head>
<body ng-app="app">

  <country>
    <state>
        <city></city>
    </state>
  </country>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <script type="text/javascript" src="app/js/main.js"></script>
</body>
</html>

main.js

var app = angular.module("app", []);

app.directive("country", function() {
    return {
        restrict: "E",
        controller: function() {
            this.makeAnnouncement = function(message) {
                console.log("Country says: " + message);
            }
        }
    }
});

app.directive("state", function() {
    return {
        restrict: "E",
        require: "^country",
        controller: function() {
            this.makeLaw = function(law) {
                console.log("Law: " + law);
            }
        },
        link: function(scope, element, attrs, countryCtrl) {

        }
    }
});

app.directive("city", function() {
    return {
        restrict: "E",
        require: ["^country", "^state"],
        link: function(scope, element, attrs, ctrls) {
            ctrls[0].makeAnnouncement("from city");
            ctrls[1].makeLaw("Jump higher");
        }
    }
});

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.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.