Frage Wie greife ich mit AngularJS auf die $ scope-Variable in der Browser-Konsole zu?


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

Ich kann es nicht sehen $scope noch der Name meines Moduls myapp in der Konsole als Variablen.


1123
2017-12-06 11:52


Ursprung


Antworten:


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

angular.element($0).scope()

Im Webkit und Firefox, $0 ist ein Verweis auf den ausgewählten DOM-Knoten auf der Registerkarte "Elemente". Dadurch wird der ausgewählte DOM-Knotenbereich in der Konsole ausgedruckt.

Sie können den Geltungsbereich auch nach Element-ID richten:

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

Erweiterungen / Erweiterungen

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

  • Batarang. Das gibt es schon eine Weile.

  • ng-Inspektor. Dies ist die neueste Version, und wie der Name schon sagt, ermöglicht es Ihnen, die Bereiche Ihrer Anwendung zu überprüfen.

Mit jsFiddle spielen

Wenn Sie mit jfiddle arbeiten, können Sie die Geige öffnen Show Modus durch Hinzufügen /show am Ende der URL. Wenn Sie so laufen, haben Sie Zugriff auf die angular global. Sie können es hier versuchen:

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

jQuery Lite

Wenn Sie jQuery vor AngularJS laden, angular.element kann 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.

Vielleicht möchten Sie eine globale Funktion verwenden, um es einfacher zu machen:

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üfe hier: http://jsfiddle.net/jaimem/DvRaR/1/show/


1613
2017-12-06 12:56



Um jms Antwort 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, macht dies das gleiche ...

$('#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, auf das Element 'Elemente' zu klicken und es wird automatisch als gespeichert $0.

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

173
2018-04-02 04:49



Wenn Sie installiert haben Batarang

Dann kannst du einfach schreiben:

$scope

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


70
2017-09-06 16:36



Dies ist eine Möglichkeit, ohne Batarang in Reichweite zu kommen.

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

Oder wenn Sie Ihren Bereich nach Controller-Namen suchen möchten, tun Sie Folgendes:

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

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

scope.$apply();

32
2018-06-04 17:02



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

console.log($scope);

Wenn Sie einen inneren / impliziten Bereich sehen wollen, sagen Sie innerhalb einer ng-Wiederholung, wird so etwas funktionieren.

<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 dem zugeordneten Bereich ausgibt das Element, das das Ereignis ausgelöst hat.

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

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


28
2017-12-06 21:16



Ein Vorbehalt zu vielen dieser Antworten: Wenn Sie Ihren Controller als Alias ​​verwenden, befinden sich Ihre Bereichsobjekte in einem Objekt innerhalb des zurückgegebenen Objekts scope().

Zum Beispiel, wenn Ihre Controller-Direktive wie folgt erstellt wird: <div ng-controller="FormController as frm"> dann auf a zugreifen startDate Eigentum Ihres Controllers würden Sie anrufen angular.element($0).scope().frm.startDate


9
2018-02-24 04:00



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

Außerdem, wenn Sie wie ich Sie haben Hauptbereich auf der body Element, a $('body').scope() funktioniert gut.


8
2018-01-23 23:54



Einfach zuweisen $scope als globale Variable. Problem gelöst.

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

Wir brauchen wirklich $scope häufiger in der Entwicklung als in der Produktion.

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


4
2017-11-01 16:26



Ich verwende normalerweise jQuery data () -Funktion dafür:

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

Das $ 0-Objekt wird derzeit im Chrome-DOM-Inspektor ausgewählt. $ 1, $ 2 .. und so weiter sind zuvor ausgewählte Objekte.


3
2017-08-03 20:53



Überprüfen Sie das Element und verwenden Sie dieses in der Konsole

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

3
2017-12-07 15:54