Wie greife ich auf die $scope-Variable in der Browserkonsole mithilfe von AngularJS zu?

Question

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

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

Answer 1

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

angular.element($0).scope()

In WebKit und Firefox ist $0 ein Verweis auf das ausgewählte DOM-Element im Elements-Tab, sodass Sie durch dies den ausgewählten DOM-Element-Scope in der Konsole angezeigt bekommen.

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

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

Addons/Erweiterungen

Es gibt einige sehr nützliche Chrome-Erweiterungen, die Sie sich ansehen sollten:

• Batarang. Dies gibt es schon eine Weile.

• ng-inspector. Dies ist der neueste, und wie der Name schon sagt, ermöglicht es Ihnen, die Scopes Ihrer Anwendung zu inspizieren.

Spielen mit jsFiddle

Beim Arbeiten mit jsFiddle können Sie das Fiddle im show-Modus öffnen, indem Sie /show am Ende der URL hinzufügen. Wenn Sie so ausführen, haben Sie Zugriff auf das angular global. Probieren Sie es hier aus:

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

jQuery Lite

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

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

Von einem Button

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

... und so weiter.

Sie möchten vielleicht tatsächlich eine globale Funktion verwenden, um es einfacher zu machen:

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

Jetzt könnten Sie das hier machen

SC('button:eq(10)')
SC('button:eq(10)').row   // -> Wert von scope.row

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

Answer 2

Um jms Antwort zu verbessern...

// Ganzen Bereich zugreifen
angular.element(myDomElement).scope();

// Zugriff auf Variable im Bereich und Änderung
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Seite aktualisieren, um geänderte Variablen widerzuspiegeln
angular.element(myDomElement).scope().$apply();

Oder wenn Sie jQuery verwenden, macht dies dasselbe...

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

Ein weiterer einfacher Weg, auf ein DOM-Element von der Konsole aus zuzugreifen (wie von jm erwähnt), besteht darin, darauf im Tab 'Elemente' zu klicken, und es wird automatisch als $0 gespeichert.

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

Answer 3

Wenn Sie Batarang installiert haben

Dann können Sie einfach schreiben:

$scope

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

Answer 4

Dies ist eine Möglichkeit, auf den Scope zuzugreifen, ohne Batarang zu verwenden, können Sie Folgendes tun:

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

Oder wenn Sie Ihren Scope nach dem Controller-Namen suchen möchten, tun Sie dies:

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

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

scope.$apply();

Answer 5

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

console.log($scope);

Wenn Sie einen inneren/impliziten Scope sehen möchten, beispielsweise innerhalb eines ng-repeat, funktioniert etwas Ähnliches wie dies.

   ...
   Scope anzeigen

Dann in Ihrem Controller

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

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

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

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