在AngularJS应用程序中获取所有范围

Question

我想知道是否有办法在AngularJS应用程序中获取所有范围，因此我可以在同一级别操作它们中的所有范围并以指令方式或顺序组织它们？

或者如果有任何方法可以获得指令实例的所有范围？

万一这不可能 - 你能解释一下为什么或者给我一些想法，你会如何处理这种需求？

Answer 1

$scope objects都是引擎盖下的链表。虽然不一定建议，但您可以使用范围的私有属性遍历$rootScope的链，或者您想要的任何起始点。

下面是一个简单的例子，用<ul>构建一个指令，将每个范围和相关的$id吐出到该列表中，以保留层次结构。

(function() { 
 

 
    function ShowScope($rootScope) { 
 

 
    function renderScope(scope, elem, level) { 
 
     var level = (level || 1); 
 
     var li = angular.element('<li>'); 
 
     var p = angular.element('<p>'); 
 
     p.text(scope.$id); 
 

 
     li.addClass('level-' + level); 
 
     li.append(p); 
 

 
     if (scope.$$childHead) { 
 

 
     var ul = angular.element('<ul>'); 
 
     
 
     renderScope(scope.$$childHead, ul, level + 1); 
 
     
 
     li.append(ul); 
 
     } 
 
     
 
     if(scope.$$nextSibling){ 
 
     renderScope(scope.$$nextSibling, elem, level); 
 
     } 
 

 
     elem.append(li); 
 
    } 
 

 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, elem, attrs) { 
 
     scope.$watch(function() { 
 

 
      elem.empty(); 
 

 
      var ul = angular.element('<ul>'); 
 
      ul.addClass('list-unstyled'); 
 
      renderScope($rootScope, ul); 
 
      elem.append(ul); 
 
     }); 
 
     } 
 
    }; 
 
    } 
 
    ShowScope.$inject = ['$rootScope']; 
 

 
    angular.module('scope-app', []) 
 
    .directive('showScope', ShowScope); 
 

 
}());

.level-1{ 
 
    background-color:rgb(255, 0, 0); 
 
} 
 

 
.level-2{ 
 
    background-color:rgb(200, 0, 0); 
 
} 
 

 
.level-3{ 
 
    background-color:rgb(150, 0, 0); 
 
}

<script src="http://code.angularjs.org/1.3.0/angular.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!-- --> 
 
<div class="container" ng-app="scope-app" ng-init="nums=[1,2,3,4,5]"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <show-scope></show-scope> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <div ng-repeat="n1 in nums"> 
 
     <p ng-repeat="n2 in nums"> 
 
     {{n1}}:{{n2}} 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>