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

Question

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

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

如果这是不可能的 - 你能解释一下为什么或给我一些想法你会如何处理这种需要？

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>