AngularJS:指令范围中的rootScope

Question

例如我有指令

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

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

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

在应用程序运行功能:

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

因此，通过这种方式，所有指令的指令范围都相同，但该范围将有权访问 $rootScope :

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

但是，如果我将创建一个孤立的范围:

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

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

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

范围会有所不同，但它们可以访问 $rootScope .



所以我需要隔离每个指令的范围，但我需要这个范围才能访问 $rootScope .

你能帮我吗？

Answer 1

scope: true
不是孤立的，不是共享的，而是每个指令实例都有一个新的原型(prototype)继承范围。

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

您可以使用 console.log(scope.$id) 记录范围的 id .与 scope: {}例如，您会得到 003 和 004。使用 scope: false (或没有)，范围是共享的，例如两者都有002。
与 scope:true他们有不同的ID，但可以读取$rootScope .

在现场示例中，您可以在本地变量 localName 中看到范围 ID。 .我将虚拟指令命名为 mydir而不是 module .将模块命名为指令看起来很奇怪。

More about AngularJS scopes