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

질문자 :murtaza52

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

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

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

 angular.element($0).scope()

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

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

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

애드온/확장

다음과 같은 매우 유용한 Chrome 확장 프로그램이 있습니다.

• 바탕화면 . 이것은 잠시 동안 주변에 있었다.

• ng-인스펙터 . 이것은 최신 버전이며 이름에서 알 수 있듯이 응용 프로그램의 범위를 검사할 수 있습니다.

jsFiddle로 놀기

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

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

제이쿼리 라이트

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/

jaime

jm의 답변을 개선하려면 ...

 // Access whole scope angular.element(myDomElement).scope(); // Access and change variable in scope angular.element(myDomElement).scope().myVar = 5; angular.element(myDomElement).scope().myArray.push(newItem); // Update page to reflect changed variables angular.element(myDomElement).scope().$apply();

또는 jQuery를 사용하는 경우 동일한 작업을 수행합니다...

 $('#elementId').scope(); $('#elementId').scope().$apply();

(jm이 언급했듯이) 콘솔에서 DOM 요소에 액세스하는 또 다른 쉬운 방법은 '요소' 탭에서 클릭하는 것입니다. 그러면 자동으로 $0 으로 저장됩니다.

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

Simon East

Batarang 을 설치한 경우

그런 다음 다음과 같이 작성할 수 있습니다.

 $scope

크롬의 요소 보기에서 요소를 선택했을 때. 참조 - https://github.com/angular/angularjs-batarang#console

chrismarx

이것은 Batarang 없이 범위를 파악하는 방법입니다. 다음을 수행할 수 있습니다.

 var scope = angular.element('#selectorId').scope();

또는 컨트롤러 이름으로 범위를 찾으려면 다음을 수행하십시오.

 var scope = angular.element('[ng-controller=myController]').scope();

모델을 변경한 후에는 다음을 호출하여 DOM에 변경 사항을 적용해야 합니다.

 scope.$apply();

BraveNewMath

컨트롤러의 어딘가에(종종 마지막 줄이 좋은 위치임)

 console.log($scope);

내부/암시적 범위, 예를 들어 ng-repeat 내부를 보고 싶다면 이와 같은 것이 작동할 것입니다.

 <li ng-repeat="item in items"> ... <a ng-click="showScope($event)">show scope</a> </li>

그런 다음 컨트롤러에서

 function MyCtrl($scope) { ... $scope.showScope = function(e) { console.log(angular.element(e.srcElement).scope()); } }

위에서 우리는 부모 범위에서 showScope() 함수를 정의했지만 괜찮습니다... 자식/내부/암시적 범위는 해당 함수에 액세스할 수 있으며 이벤트를 기반으로 범위를 인쇄하므로 이벤트를 발생시킨 요소.

@jm-의 제안도 작동 하지만 jsFiddle 내부에서 작동하지 않는다고 생각합니다. Chrome 내부의 jsFiddle에서 다음 오류가 발생합니다.

 > angular.element($0).scope() ReferenceError: angular is not defined

Community Wiki

이러한 답변 중 많은 부분에 대한 한 가지 주의 사항: 컨트롤러에 별칭을 지정하면 범위 개체가 scope() 에서 반환된 개체 내의 개체에 있습니다.

예를 들어 컨트롤러 지시문이 <div ng-controller="FormController as frm"> 과 같이 생성된 경우 컨트롤러의 startDate 속성에 angular.element($0).scope().frm.startDate

Michael Blackburn

다른 답변을 추가하고 향상시키려면 콘솔에서 $($0) 을 입력하여 요소를 가져옵니다. Angularjs 애플리케이션인 경우 기본적으로 jQuery 라이트 버전이 로드됩니다.

jQuery를 사용하지 않는 경우 다음과 같이 angular.element($0)를 사용할 수 있습니다.

 angular.element($0).scope()

jQuery와 버전이 있는지 확인하려면 콘솔에서 다음 명령을 실행합니다.

 $.fn.jquery

요소를 검사한 경우 현재 선택한 요소는 명령줄 API 참조 $0을 통해 사용할 수 있습니다. Firebug와 Chrome에는 모두 이 참조가 있습니다.

그러나 Chrome 개발자 도구는 이러한 참조를 사용하여 $0, $1, $2, $3, $4라는 속성을 통해 선택한 마지막 5개 요소(또는 힙 개체)를 사용할 수 있도록 합니다. 가장 최근에 선택한 요소나 개체는 $0, 두 번째로 가장 최근에 선택한 요소는 $1 등으로 참조할 수 있습니다.

다음은 참조를 나열하는 Firebug에 대한 명령줄 API 참조입니다.

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

사용할 수 있는 기타 사항은 다음과 같습니다.

• 요소 상위 범위 보기:

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

• 이것을 연결할 수도 있습니다.

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

• 루트 범위를 볼 수 있습니다.

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

• 격리 범위로 지시문을 강조 표시한 경우 다음을 사용하여 볼 수 있습니다.

$($0).isolateScope()

자세한 내용과 예제는 익숙하지 않은 Angularjs 코드 디버깅을 위한 팁과 요령을 참조하세요.

James Drinkard

나는 객체를 선택한 후 $scope 가 있는 Batarang이 최고라는 데 동의 angular.element($0).scope() 와 동일하거나 jQuery: $($0).scope() (내가 가장 좋아하는 것)).

body 요소에 대한 기본 범위가 있는 $('body').scope() 가 잘 작동합니다.

Dorian

$scope 를 전역 변수로 지정하기만 하면 됩니다. 문제 해결됨.

 app.controller('myCtrl', ['$scope', '$http', function($scope, $http) { window.$scope = $scope; }

실제로 프로덕션보다 개발에서 $scope 더 자주 필요합니다.

@JasonGoemaat가 이미 언급했지만 이 질문에 대한 적절한 답변으로 추가했습니다.

Sandeep

요소를 검사한 다음 콘솔에서 이것을 사용하십시오.

 s = $($0).scope() // `s` is the scope object if it exists

geg

angular.element($(".ng-scope")).scope(); 과거에는 훌륭하게 작동합니다. 페이지에 앱 범위가 하나만 있거나 다음과 같이 할 수 있는 경우에만 좋습니다.

angular.element($("div[ng-controller=controllerName]")).scope(); 또는 angular.element(document.getElementsByClassName("ng-scope")).scope();

Mike

나는 일반적으로 jQuery data() 함수를 사용합니다.

 $($0).data().$scope

$0은 현재 크롬 DOM 인스펙터에서 선택된 항목입니다. $1, $2 .. 등은 이전에 선택한 항목입니다.

wojtekc

다음과 같은 요소의 범위에 액세스하고 싶다고 가정해 보겠습니다.

 <div ng-controller="hw"></div>

콘솔에서 다음을 사용할 수 있습니다.

 angular.element(document.querySelector('[ng-controller=hw]')).scope();

그러면 해당 요소의 범위가 제공됩니다.

Praym

Chrome 콘솔에서:

 1. Select the **Elements** tab 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc. 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

예시

 angular.element($0).scope().a angular.element($0).scope().b

크롬의 콘솔

Khachornchit Songsaen

이렇게 하려면 jQuery도 설치해야 하지만 개발 환경에서는 완벽하게 작동합니다. 범위의 인스턴스를 가져오기 위해 각 요소를 살펴본 다음 컨트롤러 이름이 표시된 레이블을 반환합니다. 또한 angularjs가 일반적으로 구성에 사용하는 $로 시작하는 모든 속성을 제거합니다.

 let controllers = (extensive = false) => { let result = {}; $('*').each((i, e) => { let scope = angular.element(e).scope(); if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) { let slimScope = {}; for(let key in scope) { if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) { slimScope[key] = scope[key]; } } result[$(e).attr('ng-controller')] = slimScope; } }); return result; }

Luke Pring

각도에서 우리는 angular.element()....에 의해 jquery 요소를 얻습니다....

angular.element().scope();

예시:

<div id=""></div>

Rizo

디버깅 목적으로만 이것을 컨트롤러의 시작 부분에 넣습니다.

 window.scope = $scope; $scope.today = new Date();

그리고 이것이 내가 사용하는 방법입니다.

그런 다음 디버깅이 끝나면 삭제하십시오.

mcvkr

$scope 변수에 대한 참조에 가까운 위치에 코드의 중단점을 두십시오($scope가 현재 '일반 JavaScript' 범위에 있도록). 그런 다음 콘솔에서 $scope 값을 검사할 수 있습니다.

Chris Halcrow

범위 외부에서 JavaScript 변수를 정의하고 컨트롤러의 범위에 할당하기만 하면 됩니다.

 var myScope; ... app.controller('myController', function ($scope,log) { myScope = $scope; ...

그게 다야! 모든 브라우저에서 작동해야 합니다(적어도 Chrome 및 Mozilla에서 테스트됨).

작동 중이며 이 방법을 사용하고 있습니다.

Asqan

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