AngularJS 응용 프로그램에서 모든 Scopes 가져 오기

Question

AngularJS 응용 프로그램에서 모든 Scopes를 가져올 수있는 방법이 있는지 궁금합니다. 그래서 모두 동일한 레벨에서 조작하고 지시문 방식이나 순서로 구성 할 수 있습니까?

지시문 인스턴스의 모든 범위를 가져 오는 방법이 있습니까?

이럴 수없는 경우 - 이유를 설명하거나 나에게이 아이디어에 어떻게 접근하겠습니까?

Answer 1

$scope objects은 모두 후드 아래 연결된 목록입니다. 반드시 추천할만한 것은 아니지만 스코프의 사유 속성을 사용하여 $rootScope에서 해당 체인을 트래버스하거나 원하는 시작 지점을 사용할 수 있습니다.

다음은 각 범위를 뱉어 내고 해당 목록에 $id을 연결하여 해당 계층을 보존하는 지시문이있는 <ul>을 작성하는 간단한 예입니다.

(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>