AngularJS - Directives (Contd.)

AngularJS: Directive to Directive Communication

After explaining how to create our custom directives and their several properties, we'll be moving on to talk about how directives can be set to exchange information among themselves.

As I have more faith in working examples, I will put up one for this too.

Task description

You will come across another property of the directives, which is, controllers of their own. This helps them to manage the scope they are working on. Sometimes, it's the scope of parent elements and sometimes it's isolated. We shall talk about isolated scopes in the next article. Here, we will declare a controller for our directive and will make it work as an API to talk to other directives. I'll let the example do the talking as in the following:

var myApp = angular.module('superApp', []);

myApp.directive('superhero', function() {
    return {
        restrict: 'E',
        scope: {},
        controller: function($scope) {
            $scope.abilities = [];
            this.addStrength = function() {
                $scope.abilities.push("Strength");
            };
        },
        link: function(scope, element) {
            element.bind("mouseenter", function() {
                alert(scope.abilities);
            })
        }
    };
});

myApp.directive('strength', function() {
    return {
        require: "superhero",
        link: function(scope, element, attrs, superheroCtrl) {
            superheroCtrl.addStrength();
        }
    };
});

Apart from a directive's own controller, you will notice another directive property "require" in the second directive I declared. This enables the directive to communicate with the other ones. All I had to do was:

1. Mention the name of directive I want to talk to.

2. Add the reference to its controller as the fourth parameter in the linking function. You can name it anything instead of "superheroCtrl" and Angular will still pick it up as the controller name just because it is the fourth parameter.

Using these directives in our template:

<div ng-app="superApp">
    <superhero strength>Ironman</superhero>
</div>

When the "strength" attribute is added as a behavior for the element "superhero", it uses the function of the superhero controller to push a string inside its array. This array is displayed as an alert message when we roll the mouse over this "superhero" element, as expected.

So we can say that our directives are talking to each other now.

Now, the problem.

If I try to add another "superhero" element, the scope array "abilities" for the first element is over-written by the second element. You can see the example here: jsfiddle

In this example, the "superhero" controller acts like an API that is capable of pushing two different strings in the array "abilities". So for the first element, I have tried to push “flight” into the abilities array and “strength” in the second element. I now expect an alert message saying “flight” when the mouse is rolled over the first element and the message “strength” when rolled over the second one.

This doesn't happen though.

Wondering what might the reason be? The answer is: both the elements share the same scope, that is the parent scope. So the array "abilities" for the parent scope is over-written when the second element is rendered. This is where "isolated" scopesare relevant. It helps in providing individual scopes to the directives that have nothing to do with the parent scopes. You will see how: jsfiddle

AngularJS – Transclusion

So what happens when you have a custom component, for example, called "panel" and it contains another component, say, a button. Something like:

<div ng-app="myApp">
    <panel>
        <button>Click</button>
    </panel>
</div>

The button is simply rendered inside the component "panel" and work as expected. See: jsfiddle

What if this component or directive named "panel" has its own template defined already? Is it going to care about what you write inside the "panel" in your template? The answer is no. You will have a better idea when you look at this: jsfiddle

You will note that the button is not rendered this time. It is over-written by the content of the template defined for the directive.

The button can also be shown along with the directive's template. Transclusion makes it possible. What does it exactly do? It just yanks the content out of the component and pastes it where ever we want it to be pasted inside our template. This is how it is done:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <panel>
            <div class='other'>Another component</div>
        </panel>
    </div>
</div>

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {});

myApp.directive('panel', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: "<div class='panel'> This is the content of panel <div ng-transclude></div></div>"
    };
});

All I had to do was set the "transclude" property to "true" and the element with the "ng-transclude" attribute defines that the content is to be pasted inside this element. See it working here: jsfiddle

Previous article: AngularJS Directives : Part 6