it-swarm.com.de

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

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

Ich kann weder $scope noch den Namen meines Moduls myapp in der Konsole als Variablen sehen.

1208
murtaza52

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 ist $0 ein Verweis auf den ausgewählten DOM-Knoten auf der Registerkarte "Elemente". Auf diese Weise wird der ausgewählte DOM-Knotenbereich in der Konsole ausgedruckt.

Sie können den Bereich auch nach Element-ID ausrichten, wie folgt:

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

Addons/Extensions

Es gibt einige sehr nützliche Chrome Erweiterungen, die Sie vielleicht 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 Gültigkeitsbereiche 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 /show am Ende der URL hinzufügen. Wenn Sie so laufen, haben Sie Zugriff auf angular global. Sie können es hier ausprobieren:

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

jQuery Lite

Wenn Sie jQuery vor AngularJS laden, kann angular.element einem jQuery-Selektor übergeben werden. So können Sie den Umfang eines Controllers mit inspizieren

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önntest du das 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/

1714
jaime

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, geschieht dasselbe ...

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

Eine andere einfache Möglichkeit, von der Konsole aus auf ein DOM-Element zuzugreifen (wie bereits erwähnt), besteht darin, in der Registerkarte 'elements' darauf zu klicken und es wird automatisch als $0 gespeichert.

angular.element($0).scope();
181
Simon East

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

72
chrismarx

Dies ist eine Möglichkeit, 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 suchen möchten, gehen Sie wie folgt 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();
36
BraveNewMath

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

console.log($scope);

Wenn Sie einen inneren/impliziten Bereich sehen möchten, sagen wir in einer ng-Wiederholung, dann funktioniert so etwas.

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

Dann in deinem 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 Bereich ausgibt, der zugeordnet ist das Element, das das Ereignis ausgelöst hat.

@ jm- Vorschlag funktioniert auch, aber ich glaube nicht, dass es in einer jsFiddle funktioniert. Ich erhalte diesen Fehler bei jsFiddle in Chrome:

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

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

Wenn Ihre Controller-Direktive beispielsweise wie folgt erstellt wird: <div ng-controller="FormController as frm"> Um dann auf eine startDate -Eigenschaft Ihres Controllers zuzugreifen, rufen Sie angular.element($0).scope().frm.startDate auf.

10

Ich stimme zu, das Beste ist Batarang mit dem $scope nach der Auswahl eines Objekts (es ist dasselbe wie angular.element($0).scope() oder noch kürzer mit jQuery: $($0).scope() (mein Favorit))

Wenn Sie wie ich den Hauptbereich für das body -Element haben, funktioniert auch ein $('body').scope() einwandfrei.

8
Dorian

Geben Sie zum Hinzufügen und Verbessern der anderen Antworten in der Konsole $($0) ein, 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 den folgenden 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 diesen Verweis.

Die Entwickler-Tools Chrome 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 Verweise 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 , die die Referenzen auflistet.

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

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

  • Anzeigen eines übergeordneten Bereichs für Elemente:

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

  • Sie können dies auch verketten:

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

  • Sie können sich den Root-Bereich ansehen:

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

  • Wenn Sie eine Direktive mit isoliertem Geltungsbereich hervorgehoben haben, können Sie sie folgendermaßen anzeigen:

$($0).isolateScope()

Siehe Tipps und Tricks zum Debuggen von nicht vertrautem Angularjs-Code für weitere Details und Beispiele.

5
James Drinkard

Untersuchen Sie das Element und verwenden Sie es in der Konsole

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

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

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

4
Mike

Weisen Sie einfach $scope als globale Variable zu. 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.

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

4
Sandeep

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

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

Das Element $ 0 ist derzeit im DOM-Inspektor chrome ausgewählt. $ 1, $ 2 usw. sind zuvor ausgewählte Elemente.

3
wojtekc

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 an diesem Element.

2
Praym

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 enter image description here

Dazu muss auch jQuery installiert sein, es funktioniert jedoch perfekt für eine Entwicklungsumgebung. Es durchsucht jedes Element, um die Instanzen der Bereiche abzurufen, und gibt sie mit den Namen der Controller zurück. Es wird auch jede Eigenschaft entfernt, die mit einem $ beginnt, was AngularJS normalerweise 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;
        }
0
Luke Pring

in angular bekommen wir jquery element von angular.element () .... lass uns c ...

angular.element().scope();

beispiel:

<div id=""></div>

0
Rizo

Nur zu Debug-Zwecken habe ich dies an den Start des Controllers gesetzt.

   window.scope = $scope;

  $scope.today = new Date();

Und so benutze ich es.

enter image description here

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

0
mcvkr

Fügen Sie einen Haltepunkt in Ihren Code ein, der sich in der Nähe eines Verweises auf die Variable $ scope befindet (so dass sich der Bereich $ scope im aktuellen 'normalen alten JavaScript'-Bereich befindet). Anschließend können Sie den Wert für $ scope in der Konsole überprüfen.

0
Chris Halcrow