Communication between two directives with isolated scope in AngularJS

Question

I've created two directives with isolate scopes. When I include both on the same DOM element:

<div directive-one="" type-message="setMessageError" directive-two="">

I'm getting obviously the following error:

Multiple directives [directiveOne, directiveTwo] asking for new/isolated scope on:

app.directive('directiveOne',function () {
    return {
        scope: {
            typeMessage: "=",
        },
    };
}]);


app.directive('directiveTwo', function () {    
        return {
            templateUrl: 'template.html',
            controller: function($scope) {$scope.setMessageError="error";}
            restrict: 'A',
            scope: {
                someScope: "="
            },

        };
    });

Is there any way to set attribute typeMessage from directiveTwo by directiveTwo's controller, as you can see on the below example.

Generally directives communicate by requiring each other's controller. Perhaps if you elaborate a bit on the purpose/function/intention of your directives, we could suggest a more detailed solution. — Nikos Paraskevopoulos
The basic purpose of the second directive's controller is to set variable setMessageError on some value and the first directive reading that value need do something in its link function. — mehmedju
Are they meant to work together? Do you consider it acceptable for one of them to know the other (in other words do you mind if one is strongly coupled to the other)? — Nikos Paraskevopoulos
Second directive has a template only input field, and controller of it parse the entered value and set the variable typeMessage as 'error', 'success', 'warning',while first directive has a toastr directive as dependency and read value of typeMessage attribute and make some action based on it. — mehmedju

Nikos Paraskevopoulos Nikos Paraskevopoulos · Accepted Answer · 2015-02-17T16:03:40

You can implement the first directive without isolated scope, with a little extra effort:

app.directive('directiveOne', [function () {
    return {
        link: function(scope, elem, attrs) {
            scope.$watch(attrs.typeMessage, function(newval) {
                // react to changes
            };
        }
    };
}]);

This code treats the value of type-message as an Angular expression and watches it, i.e. the equivalent, hard-coded watch would be scope.$watch('setMessageError', ...).

Communication between two directives with isolated scope in AngularJS

1 Answers