angularjs variable in html




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

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

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

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

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


Angenommen, Sie möchten auf den Gültigkeitsbereich des Elements zugreifen

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

Sie könnten Folgendes in der Konsole verwenden:

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

Dadurch erhalten Sie den Bereich für dieses Element.


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

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 von scope() .

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


Ich habe angular.element($(".ng-scope")).scope(); in der Vergangenheit und es funktioniert super. Nur gut, wenn Sie nur einen Anwendungsumfang auf der Seite haben, oder Sie können etwas tun wie:

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


Ich stimme dem besten zu, ist Batarang mit seinem $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))

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


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


Um die anderen Antworten hinzuzufügen und zu erweitern, geben Sie in der Konsole $($0) , um das Element zu erhalten. 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()

Um zu überprüfen, ob Sie jQuery und die Version haben, führen Sie diesen Befehl in der Konsole aus:

$.fn.jquery

Wenn Sie ein Element überprüft haben, ist das aktuell ausgewählte Element über die Befehlszeilen-API-Referenz $ 0 verfügbar. Firebug und 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 mithilfe dieser Referenzen ausgewählt wurden. Das zuletzt ausgewählte Element oder Objekt kann als $ 0, das zweitletzte als $ 1 usw. referenziert werden.

Hier ist die Befehlszeilen-API-Referenz für Firebug , die ihre Referenzen auflistet.

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

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

  • Zeigen Sie einen übergeordneten Elementbereich an:

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

  • Sie können dies auch verketten:

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

  • Sie können den Root-Bereich betrachten:

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

  • Wenn Sie eine Direktive mit isolierendem Geltungsbereich markiert haben, können Sie sie mit

$($0).isolateScope()

Weitere Informationen und Beispiele finden Sie unter Tipps und Tricks zum Debuggen von unbekanntem Angularjs-Code .


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

angular.element($0).scope()

In WebKit und Firefox ist $0 eine Referenz 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-inspector . 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 jsfiddle arbeiten, können Sie die Fiddle im Show- Modus öffnen, indem Sie /show am Ende der URL hinzufügen. Wenn Sie so arbeiten, haben Sie Zugriff auf das angular globale. Sie können es hier versuchen:

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

jQuery Lite

Wenn Sie jQuery vor AngularJS angular.element kann an angular.element 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üfen Sie hier: http://jsfiddle.net/jaimem/DvRaR/1/show/


Weisen Sie $scope als globale Variable zu. Problem gelöst.

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

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

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


in eckigen bekommen wir jquery element von angular.element () .... lets c ...

angular.element().scope();

Beispiel:

<div id=""></div>





angularjs-scope