Wie greife ich mit AngularJS auf die Variable $ scope in der Browserkonsole zu?

Ich möchte auf meine $scopeVariable in der JavaScript-Konsole von Chrome zugreifen. Wie mache ich das?

Ich kann weder $scopeden Namen meines Moduls myappin der Konsole als Variablen sehen noch.

Wählen Sie im HTML-Bereich der Entwicklertools ein Element aus und geben Sie dieses in die Konsole ein:

angular.element($0).scope()

In WebKit und Firefox $0wird auf der Registerkarte "Elemente" auf den ausgewählten DOM-Knoten verwiesen. Auf diese Weise wird der ausgewählte DOM-Knotenbereich in der Konsole ausgedruckt.

Sie können den Bereich auch nach Element-ID ausrichten, z. B.:

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

Addons / Erweiterungen

Es gibt einige sehr nützliche Chrome-Erweiterungen, die Sie möglicherweise ausprobieren möchten:

• Batarang . Das gibt es schon eine Weile.

• ng-inspector . Dies ist die neueste Version, mit der Sie, wie der Name schon sagt, die Bereiche Ihrer Anwendung überprüfen können.

Mit jsFiddle spielen

Wenn Sie mit jsfiddle arbeiten, können Sie die Geige im Show- Modus öffnen , indem Sie sie /showam Ende der URL hinzufügen . Wenn Sie so laufen, haben Sie Zugriff auf die angularglobale. Sie können es hier versuchen:

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

jQuery Lite

Wenn Sie jQuery vor AngularJS laden, angular.elementkann ein jQuery-Selektor übergeben werden. So können Sie den Umfang eines Controllers mit überprüfen

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

Von einem Knopf

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

... und so weiter.

Möglicherweise möchten Sie tatsächlich eine globale Funktion verwenden, um dies zu vereinfachen:

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

Jetzt könnten Sie dies tun

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

Überprüfen Sie hier: http://jsfiddle.net/jaimem/DvRaR/1/show/

Um die Antwort von jm zu verbessern ...

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

Oder wenn Sie jQuery verwenden, funktioniert dies genauso ...

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

Eine andere einfache Möglichkeit, über die Konsole auf ein DOM-Element zuzugreifen (wie von jm erwähnt), besteht darin, auf der Registerkarte "Elemente" darauf zu klicken, und es wird automatisch als gespeichert $0.

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

Wenn Sie Batarang installiert haben

Dann können Sie einfach schreiben:

$scope

Wenn Sie das Element in der Elementansicht in Chrom ausgewählt haben. Ref - https://github.com/angular/angularjs-batarang#console

Dies ist ein Weg, um ohne Batarang zum Ziel zu gelangen. Sie können Folgendes tun:

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

Oder wenn Sie Ihren Bereich anhand des Controllernamens ermitteln möchten, gehen Sie folgendermaßen vor:

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

Nachdem Sie Änderungen an Ihrem Modell vorgenommen haben, müssen Sie die Änderungen auf das DOM anwenden, indem Sie Folgendes aufrufen:

scope.$apply();

Irgendwo in Ihrem Controller (oft ist die letzte Zeile ein guter Ort), setzen Sie

console.log($scope);

Wenn Sie einen inneren / impliziten Bereich sehen möchten, z. B. innerhalb einer ng-Wiederholung, funktioniert so etwas.

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

Dann in Ihrem Controller

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

Beachten Sie, dass wir oben die Funktion showScope () im übergeordneten Bereich definieren, aber das ist in Ordnung ... der untergeordnete / innere / implizite Bereich kann auf diese Funktion zugreifen, die dann den Bereich basierend auf dem Ereignis und damit den damit verbundenen Bereich ausgibt das Element, das das Ereignis ausgelöst hat.

Der Vorschlag von @ jm-´ funktioniert auch, aber ich glaube nicht, dass er in einer jsFiddle funktioniert. Ich erhalte diesen Fehler auf jsFiddle in Chrome:

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

Eine Einschränkung für viele dieser Antworten: Wenn Sie Ihren Controller als Alias ​​verwenden, befinden sich Ihre Bereichsobjekte in einem Objekt innerhalb des zurückgegebenen Objekts von scope().

Wenn Ihre Controller-Direktive beispielsweise so erstellt wird: Um <div ng-controller="FormController as frm"> auf eine startDateEigenschaft Ihres Controllers zuzugreifen , würden Sie aufrufenangular.element($0).scope().frm.startDate

Ich bin damit einverstanden, dass Batarang das Beste ist, nachdem es $scopeein Objekt ausgewählt hat (es ist dasselbe angular.element($0).scope()oder sogar kürzer mit jQuery: $($0).scope()(mein Favorit))

Auch wenn Sie wie ich Ihren Hauptbereich für das bodyElement haben, $('body').scope()funktioniert a einwandfrei.

Um die anderen Antworten hinzuzufügen und zu verbessern, geben Sie in der Konsole ein $($0), um das Element abzurufen. Wenn es sich um eine Angularjs-Anwendung handelt, wird standardmäßig eine jQuery Lite-Version geladen.

Wenn Sie jQuery nicht verwenden, können Sie angle.element ($ 0) wie folgt verwenden:

angular.element($0).scope()

Führen Sie diesen Befehl in der Konsole aus, um zu überprüfen, ob Sie über jQuery und die Version verfügen:

$.fn.jquery

Wenn Sie ein Element überprüft haben, ist das aktuell ausgewählte Element über die Befehlszeilen-API-Referenz $ 0 verfügbar. Sowohl Firebug als auch Chrome haben diese Referenz.

Die Chrome-Entwicklertools stellen jedoch die letzten fünf Elemente (oder Heap-Objekte) zur Verfügung, die über die Eigenschaften $ 0, $ 1, $ 2, $ 3, $ 4 unter Verwendung dieser Referenzen ausgewählt wurden. Das zuletzt ausgewählte Element oder Objekt kann als $ 0, das zweitletzte als $ 1 usw. bezeichnet werden.

Hier ist die Befehlszeilen-API-Referenz für Firebug , in der die Referenzen aufgeführt sind.

$($0).scope()gibt den dem Element zugeordneten Bereich zurück. Sie können seine Eigenschaften sofort sehen.

Einige andere Dinge, die Sie verwenden können, sind:

• Übergeordneten Elementbereich anzeigen:

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

• Sie können dies auch verketten:

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

• Sie können sich den Stammbereich ansehen:

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

• Wenn Sie eine Direktive mit isoliertem Gültigkeitsbereich hervorgehoben haben, können Sie sie mit folgenden Elementen anzeigen:

$($0).isolateScope()

Weitere Details und Beispiele finden Sie unter Tipps und Tricks zum Debuggen von nicht bekanntem Angularjs-Code .

Untersuchen Sie das Element und verwenden Sie es in der Konsole

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

Einfach $scopeals globale Variable zuweisen . Problem gelöst.

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

Wir brauchen tatsächlich $scopeöfter in der Entwicklung als in der Produktion.

Bereits von @JasonGoemaat erwähnt, aber als geeignete Antwort auf diese Frage hinzugefügt.

Ich habe angular.element($(".ng-scope")).scope();in der Vergangenheit verwendet und es funktioniert großartig. Nur gut, wenn Sie nur einen App-Bereich auf der Seite haben oder Folgendes tun können:

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

Normalerweise verwende ich dafür die Funktion jQuery data ():

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

Das Element $ 0 ist derzeit im Chrome DOM Inspector als Element ausgewählt. $ 1, $ 2 .. usw. sind zuvor ausgewählte Elemente.

Angenommen, Sie möchten auf den Bereich des Elements wie zugreifen

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

In der Konsole können Sie Folgendes verwenden:

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

Dies gibt Ihnen den Umfang für dieses Element.

An der Chrome-Konsole:

 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

Beispiel

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

Chrome-Konsole

Dies erfordert die Installation von jQuery, funktioniert jedoch perfekt für eine Entwicklungsumgebung. Es durchsucht jedes Element, um die Instanzen der Bereiche abzurufen, und gibt sie dann mit den Controller-Namen zurück. Das Entfernen von Eigenschaften beginnt ebenfalls mit einem $, das anglejs im Allgemeinen für seine Konfiguration verwendet.

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;
        }

im Winkel erhalten wir jquery element durch angle.element () .... lässt c ...

angular.element().scope();

Beispiel:

<div id=""></div>

Nur zum Debuggen habe ich dies an den Start des Controllers gesetzt.

   window.scope = $scope;

  $scope.today = new Date();

Und so benutze ich es.

Löschen Sie es dann, wenn ich mit dem Debuggen fertig bin.

Setzen Sie einen Haltepunkt in Ihren Code an einer Stelle in der Nähe eines Verweises auf die Variable $ scope (sodass sich der Bereich $ im aktuellen Bereich 'normales altes JavaScript' befindet). Anschließend können Sie den Wert für $ scope in der Konsole überprüfen.

Definieren Sie einfach eine JavaScript-Variable außerhalb des Bereichs und weisen Sie sie Ihrem Bereich in Ihrem Controller zu:

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

Das ist es! Es sollte in allen Browsern funktionieren (zumindest in Chrome und Mozilla getestet).

Es funktioniert und ich benutze diese Methode.