AngularJS : Scope not shared across directives

Question

I have 2 directives on the same tag, <settings> and <modal>. settings provides a template, while modal creates an isolated scope:

jsfiddle

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

app.directive('settings', function () {
    return {
        restrict: 'E',

        template: '<div>SETTINGS</div>',

        link: function (scope) {
            console.log('settings', scope.$id);
        }
    };
});

app.directive('modal', function () {
    return {
        restrict: 'A',

        scope: {},

        link: function (scope) {
            console.log('modal', scope.$id);
        }
    };
});

However, they do not end up sharing the same scope, as shown by the logs:

<settings modal="settings"></settings>

settings 002
modal 003

Why is that ?

Community · Accepted Answer · 2017-05-23 12:14:14Z

1

Till version 1.2.0rc3, sibling directives were sharing the same isolated scope if created.

As of version 1.2.0, you cannot (and shouldn't) access the isolated scope from outside the contents compiled against this isolated scope. You shouldn't because you are creating a hidden relation between both directives. Better use directive's controller requirement via the require property, or share informations through injected services if singleton pattern can be applied to your use case.

It is finally deeply related to this other question about Directives with Isolated scope versions conflict

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Mar 12, 2014 at 21:15

atondelier

2,43417 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

doodeec · Accepted Answer · 2014-03-12 09:41:42Z

1

scope: {} option always creates an isolated scope for the directive, it doesn't care about other directives

answered Mar 12, 2014 at 9:41

doodeec

2,92722 silver badges23 bronze badges

3 Comments

Laurent Perrin Over a year ago

OK, but can I somehow get the 2 directives to share the same (isolated) scope ? They can't both create an isolated scope.

doodeec Over a year ago

you can make the non-isolated directive ember into the isolated one, or create an isolated wrapper directive and then keep both of them non-isolated... I don't think it's a good idea to mix non-isolated/isolated directives as one element

Laurent Perrin Over a year ago

I was trying to avoid that, possibly by forcing the isolating directive to transclude the non-isolated one, but I guess I have no choice…

Jorge Enrique Reyes Salas · Accepted Answer · 2014-03-12 19:56:03Z

0

app.directive('modal', function () {
    return {
        restrict: 'A',

        scope: false,

        link: function (scope) {
            console.log('modal', scope.$id);
        }
    };
});

scope: false will not create a new isolated scope. I you want to make two directives work between them use require a controller on the directive that way you can share data between them.

answered Mar 12, 2014 at 19:56

Jorge Enrique Reyes Salas

4232 silver badges6 bronze badges

Collectives™ on Stack Overflow

AngularJS : Scope not shared across directives

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related