AngularJS parent directive communicate with child directive

Question

Consider two nested directives with isolate scopes:

<dctv1>
    <dctv2></dctv2>
<dctv1>

If I want dctv2 to talk to dctv1 I have may options:

1. I may require the controller of dctv1 in the definition of dctv2 using the require:'^dctv1'
2. I may call an expression on the parent scope with the wrapper <dctv2 callParent="hello()"></dctv2> and scope:{callParent:'&'}
3. I can also use $scope.$emit in dctv2 but then all parent scopes will hear the message.

Now I want dctv1 to talk to dctv2 .

1. The only way I may accomplish this is to use $scope.$broadcast , but then all children will hear.

By talk to here i mean call a function or similar. Don't want to set up watches clogging the digestloop.

How can I make dctv1 notify dctv2 in the best way, making them loose-coupled? I should just be able to remove dctv2 without errors.

Answer 1

Take a look at AngularJS NgModelController for some ideas.

Each <dctv2> directive would require <dvtv1> to have it's controller injected. You can then add objects or callbacks to properties of that controller, and remove them when <dctv2> is destroyed.

<dvtv1> would not talk directly to children, but would trigger callbacks bound to it's properties.

For example;

NgModelController has $parsers and $formatters that are an array of function callbacks. You push your own functions into the array to extend that controllers behavior.

When NgModelController performs input validation it's basically talking to other directives via these properties.

Answer 2

I would suggest using angular services . That way you can decouple your behavior into one or more services.

Take a look at this also : AngularJS : How to watch service variables?

Answer 3

One way is to make a Service/Factory that will communicate with the controllers that you want.

For example, here's a getter/setter Factory

.factory('factoryName', function () {

    var something = "Hello";

    return {

        get: function () {
            return something;
        },

        set: function (keyword) {
            something = keyword;
            return something ;
        }
    };

}])

And then in your controllers:

.controller('controllerOne', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
}]);

.controller('controllerTwo', ['factoryName', function (factoryName) {
    $scope.test = factoryName.get();
    $scope.clickThis = function (keyword) {
        factoryName.set(keyword);
    };
}]);

I suggest reading up on this : Can one controller call another?

Answer 4

You can manage it using an id for each child that have to be passed to the parent; the parent will broadcast back the event using that id: the child will do the action only if the id passed from the parent is the his own.

Bye