AngularJS에서는 한 페이지에 있는 모든 스코프를 어떻게 찾을 수 있습니까?

AngularJS에서는 한 페이지에 있는 모든 스코프를 어떻게 찾을 수 있습니까?

범위를 확보하면 루트로 이동하여 범위 계층을 탐색할 수 있습니다.

하지만 한 페이지에 있는 모든 스코프를 직접 찾을 수 있는 방법이 있을까요?

마찬가지로 HTML 요소를 지정하면 동봉 범위를 직접 찾을 수 있는 방법이 있습니까?

이 CSS 셀렉터를 사용하면 페이지의 모든 스코프를 표시할 수 있습니다.

.ng-scope { border: 1px solid red; }

및 모든 바인딩:

.ng-binding { border: 1px solid red; }

다음으로 DOM 요소를 실렉터로 변환하여 취득할 수 있습니다.

var selector = angular.element(some_dom_element);

그런 다음 선택기를 사용하여 스코프/컨트롤러/인젝터를 검색합니다.

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();

모든 스코프가 요소에 바인딩되어 있는 것은 아닙니다.페이지에 모든 스코프를 표시하려면 다음과 같이 스코프 트리를 걷습니다.

function getScopes(root) {
    var scopes = [];

    function visit(scope) {
        scopes.push(scope);
    }
    function traverse(scope) {
        visit(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }

    traverse(root);
    return scopes;
}

getScopes($rootScope)

이 방법이 도움이 되는 이유는 모르겠지만, 다음과 같이 할 수 있습니다.

scopeElements = document.getElementsByClassName('ng-scope');
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); })

다른 옵션은 개인 apis: $$child를 사용하여 루트 스코프에서 시작하는 스코프 트리를 통과하는 것입니다.헤드 및 $$nextSibling.

스코프 경계가 어디에 있는지 알고 싶을 뿐이며, 다음과 같이 할 수 있습니다.

scopeElements = document.getElementsByClassName('ng-scope');
angular.element(scopeElements).css('border', '1px solid red');

그런 다음 웹 검사기를 사용하여 관심 요소를 선택하고 범위를 얻을 수 있습니다.

angular.element($0).scope();

Angular 추천JS바타랑.페이지의 모든 범위를 시각화할 수 있는 디버깅 도구입니다.

https://github.com/angular/angularjs-batarang

다음 명령을 사용하여 요소의 범위를 확인할 수 있습니다.

$(element).scope()

또는

angular.element(element).scope()

(루트 스코프에서 아래로 이동하는 것 외에) 모든 스코프를 쉽게 페이지에 표시할 수 있는 방법은 없다고 생각합니다.

Google Chrome 브라우저(아직 사용하지 않는 경우)에서 애플리케이션을 개발해야 하며 새로운 전용 Angular를 추가하는 멋진 Batarang 확장을 사용할 수 있습니다.JS 패널을 개발자 도구에 연결합니다.모든 스코프, 스코프 간의 관계, 모든 속성을 가진 값 등을 확인할 수 있습니다.

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

Chrome에서는 개발자 도구를 사용합니다.콘솔 명령줄을 사용합니다.

개발자 도구의 HTML 패널에서 요소를 선택하고 콘솔에 다음과 같이 입력합니다.

angular.element($0).scope()

또는 페이지 요소를 마우스 오른쪽 버튼으로 클릭하고: inspect 요소를 선택합니다.

$($0).scope()는 요소와 관련된 범위를 반환합니다.그 특성을 바로 알 수 있습니다.

요소를 보려면 상위 범위:

$($0).scope().$parent

이것도 체인으로 할 수 있습니다.

$($0).scope().$parent.$parent

루트 스코프를 참조할 수 있습니다.

$($0).scope().$root

격리 스코프를 가지는 디렉티브를 강조 표시했을 경우는, 다음과 같이 확인할 수 있습니다.

$($0).isolateScope()

사용 가능한 경우 하위 범위 및 형제 범위에서도 동일한 작업을 수행할 수 있습니다.

$($0).scope().$sibling

범위를 위아래로 이동하여 어떤 범위에 어떤 컨트롤러, 객체 등이 있는지 확인할 수 있습니다.또, 커스텀 디렉티브를 사용하고 있는 경우는, 이것이 불가결합니다.대규모 코드 베이스에서는, 이러한 것을 찾기가 쉽지 않습니다.

최근에 같은 이름의 컨트롤러가 2개 있었는데, 한 개의 대문자만 보기에 첨부되어 있었습니다.잘못된 컨트롤러를 사용하고 있었기 때문에 바인딩에 문제가 있다는 것을 깨닫기까지 시간이 걸렸습니다.

에는 Angules가 .$rootScope모든 스코프의 루트입니다.하위 필드가 있으며 전체 계층이 $rootScope 내에 있습니다.html 요소를 사용하여 스코프를 찾으려면 해당 스코프가 Isolated 스코프일 수 있기 때문에 문제가 발생할 수 있습니다.아마 지시가 있을 거야 스코프가 분리되어 있는 곳이죠그런 게 있으면, 그걸 이용해봐

언급URL : https://stackoverflow.com/questions/10514147/in-angularjs-how-do-you-find-all-the-scopes-on-a-page