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

$scopeChrome의 JavaScript 콘솔에서 변수에 액세스하고 싶습니다 . 어떻게합니까?

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

개발자 도구의 HTML 패널에서 요소를 선택하고 콘솔에이를 입력하십시오.

angular.element($0).scope()

에서 웹킷 과 파이어 폭스, $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 라이트

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/

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

콘솔에서 DOM 요소에 액세스하는 또 다른 쉬운 방법은 jm 언급 한대로 'elements'탭에서 해당 요소를 클릭하면 자동으로로 저장됩니다 $0.

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

Batarang 을 설치 한 경우

그럼 당신은 쓸 수 있습니다 :

$scope

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

이것은 Batarang없이 범위를 얻는 방법입니다.

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

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

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

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

scope.$apply();

컨트롤러 어딘가에 (종종 마지막 줄이 좋은 곳입니다)

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

이러한 답변 중 하나에 대한주의 사항 : 컨트롤러의 별칭을 지정하면 스코프 객체는 반환 된 객체 내의 객체에 있습니다. scope() .

예를 들어 컨트롤러 지시어가 <div ng-controller="FormController as frm"> 다음 과 같이 생성되면 컨트롤러 의 startDate속성에 액세스 하려면angular.element($0).scope().frm.startDate

$scope객체를 선택한 후 Batarang이 가장 좋습니다 ( angular.element($0).scope()jQuery와 동일 하거나 더 짧습니다).$($0).scope() (내 마음에 드는))

또한 나처럼 당신이 body요소의 주요 범위를 가지고 있다면 $('body').scope()잘 작동합니다.

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

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 코드 디버깅을위한 팁과 요령을 참조하십시오 .

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

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

$scope전역 변수로 지정 하십시오. 문제 해결됨.

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

우리는 실제로 $scope생산보다 개발에서 더 자주 필요합니다 .

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

나는 angular.element($(".ng-scope")).scope();과거에 사용해 왔으며 훌륭하게 작동합니다. 페이지에 앱 범위가 하나만 있거나 다음과 같은 작업을 수행 할 수있는 경우에만 적합합니다.

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

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

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

크롬 DOM 검사기에서 $ 0이 현재 선택되어 있습니다. $ 1, $ 2 등은 이전에 선택한 항목입니다.

다음과 같은 요소의 범위에 액세스하고 싶다고 가정 해보십시오.

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

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

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

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

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

크롬 콘솔

이를 위해서는 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;
        }

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

angular.element().scope();

예:

<div id=""></div>

디버깅 목적으로 만 컨트롤러 시작 부분에 추가했습니다.

   window.scope = $scope;

  $scope.today = new Date();

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

디버깅이 끝나면 삭제하십시오.

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

범위 밖에서 JavaScript 변수를 정의하고 컨트롤러의 범위에 할당하십시오.

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

그게 다야! 모든 브라우저에서 작동해야합니다 (최소한 Chrome 및 Mozilla에서 테스트).

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