AngularJS: rootScope in directives scopes

Question

For example I have directive

App.directive('module', function($compile)
{   
    return  {

        replace     : true,         
        restrict    : 'E',
        link: function(scope, iElement, iAttrs)
        {   
            scope.localName = '1';
        },

        template : '<div> {{ name }} - {{ localName }}</div>',  
    }       
});

At application run function:

App.run(function($rootScope, $location)
{
    $rootScope.name = "test";
}

So in this way directive's scope will be same for all directives but this scope will have access to $rootScope:

<module></module> 
<module></module>

But if I will make an isolated scope:

App.directive('module', function()
{   
    return  {

        replace     : true,         
        restrict    : 'E',
        link: function(scope, iElement, iAttrs)
        {   
            scope.localName = '1';
        },

        template : '<div> {{ name }} - {{ localName }}</div>',
            scope : {}  
    }       
});

Scopes will be different, but they will be have access to $rootScope.

So I need to isolate the scope of each directive but I need this scope to have access to $rootScope.

Can you help me please?

Eduard Gamonal · Accepted Answer · 2013-07-16 16:13:06Z

4

scope: true

not isolated, not shared, but a new prototipically inherited scope per directive instance.

http://jsfiddle.net/4LAjf/1

You can log the id of the scope with console.log(scope.$id). With scope: {} you'll get, for example, 003 and 004. With scope: false (or nothing), the scope is shared, e.g. both have 002. With scope:true they have different id's but can read $rootScope.

In the live example you can see the scope ID in your local variable localName. I named the dummy directive mydir instead of module. It just looks weird naming module a directive.

More about AngularJS scopes

edited Jul 16, 2013 at 16:13

answered Jul 16, 2013 at 16:02

Eduard Gamonal

8,0315 gold badges44 silver badges48 bronze badges

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

1 Comment

Thiago Frias Over a year ago

Save my life did not know this thing could cause so much problems

Collectives™ on Stack Overflow

AngularJS: rootScope in directives scopes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related