AngularJS:指令范围中的rootScope

时间:2013-07-16 15:48:28

标签: angularjs angularjs-scope

例如,我有指令

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>

http://i.stack.imgur.com/QF8wM.png

但如果我要制作一个孤立的范围:

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

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

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

范围会有所不同,但他们可以访问 $ rootScope

http://i.stack.imgur.com/XITHr.png

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

你能帮我吗?

1 个答案:

答案 0 :(得分:4)

scope: true

不是孤立的,不是共享的,而是每个指令实例的一个新的prototipically inherited范围。

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