AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 액세스 하는 방법

질문 : AngularJS를 사용하여 브라우저 콘솔에서 $ scope 변수에 어떻게 액세스합니까?

---

Chrome의 JavaScript 콘솔에서 $scope 변수에 액세스하고 싶습니다. 어떻게하나요?

$scope myapp 모듈 이름을 변수로 볼 수 없습니다.

답변

---

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

angular.element($0).scope()

WebKit 및 Firefox에서 $0 은 요소 탭에서 선택한 DOM 노드에 대한 참조이므로 이렇게하면 선택한 DOM 노드 범위가 콘솔에 인쇄됩니다.

다음과 같이 요소 ID로 범위를 타겟팅 할 수도 있습니다.

angular.element(document.getElementById('yourElementId')).scope()

애드온 / 확장

확인하고 싶은 매우 유용한 Chrome 확장 프로그램이 있습니다.

• Batarang . 이것은 한동안 주변에있었습니다.
• ng-inspector . 이것은 최신 버전이며 이름에서 알 수 있듯이 애플리케이션의 범위를 검사 할 수 있습니다.

 

 

jsFiddle로 재생

jsfiddle로 작업 할 때 URL 끝에 /show 를 추가하여 표시 모드에서 바이올린을 열 수 있습니다. angular 글로벌에 액세스 할 수 있습니다. 여기에서 시도해 볼 수 있습니다.

http://jsfiddle.net/jaimem/Yatbt/show

jQuery Lite

AngularJS 전에 jQuery를로드하면 angular.element 에 jQuery 선택기를 전달할 수 있습니다. 따라서 컨트롤러의 범위를 검사 할 수 있습니다.

angular.element('[ng-controller=ctrl]').scope()

버튼의

 angular.element('button:eq(1)').scope()

... 등등.

실제로 전역 함수를 사용하여 더 쉽게 만들 수 있습니다.

window.SC = function(selector){
    return angular.element(selector).scope();
};

이제 할 수 있습니다

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

여기에서 확인하십시오 : http://jsfiddle.net/jaimem/DvRaR/1/show/

출처 : https://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs