CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
mehmedju
mehmedju

Reputation: 311

Communication between two directives with isolated scope in AngularJS

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.

Upvotes: 2

Views: 817

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

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', ...).

Upvotes: -1

Related Questions