AngularJS: rootScope in directives scopes

angularjs, angularjs-scope

Solution

`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

Problem

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?

Original source