wake-up-neo.com

Wie finden Sie in AngularJS alle Bereiche auf einer Seite?

Sobald wir einen Geltungsbereich in der Hand haben, können wir zu seinem Stamm navigieren und die Hierarchie des Geltungsbereichs erkunden.

Aber gibt es eine direkte Möglichkeit, alle Bereiche auf einer Seite zu finden?

Gibt es bei einem HTML-Element ebenfalls einen direkten Weg, um seinen einschließenden Geltungsbereich zu finden?

31
wl.

sie können mit dieser CSS-Auswahl alle Bereiche auf der Seite sehen

.ng-scope { border: 1px solid red; }

und alle Bindungen:

.ng-binding { border: 1px solid red; }

Sie können sie dann abrufen, indem Sie das DOM-Element in einen Selektor konvertieren

var selector = angular.element(some_dom_element);

Verwenden Sie dann den Wahlschalter, um das Oszilloskop/die Steuerung/das Einspritzventil abzurufen

var scope = selector.scope();
var controller = selector.controller();
var injector = selector.injector();
80
Misko Hevery

Nicht alle Bereiche sind an Elemente gebunden. Wenn Sie alle Bereiche auf der Seite haben möchten, gehen Sie wie folgt in den Bereichsbaum:

function getScopes(root) {
    var scopes = [];

    function visit(scope) {
        scopes.Push(scope);
    }
    function traverse(scope) {
        visit(scope);
        if (scope.$$nextSibling)
            traverse(scope.$$nextSibling);
        if (scope.$$childHead)
            traverse(scope.$$childHead);
    }

    traverse(root);
    return scopes;
}

getScopes($rootScope)
21
larspars

Ich weiß nicht, warum das für Sie nützlich sein würde, aber Sie können dies tun:

scopeElements = document.getElementsByClassName('ng-scope');
scopes = [].map.call(scopeElements, function(e){ return angular.element(e).scope(); })

Die andere Option besteht darin, den Gültigkeitsbereichsbaum vom Stammbereich aus mit unseren privaten apis zu durchlaufen: $$ childHead und $$ nextSibling.

Es ist wahrscheinlicher, dass Sie nur wissen möchten, wo die Bereichsgrenzen liegen, und Sie können es damit tun:

scopeElements = document.getElementsByClassName('ng-scope');
angular.element(scopeElements).css('border', '1px solid red');

Dann können Sie einfach den Web-Inspector verwenden, um ein interessantes Element auszuwählen und dessen Gültigkeitsbereich zu ermitteln:

angular.element($0).scope();
16
Igor Minar

Ich empfehle AngularJS Batarang. Es ist ein Debugging-Tool, mit dem Sie unter anderem alle Bereiche der Seite visualisieren können. 

https://github.com/angular/angularjs-batarang

10
vonkohorn

Sie können einen Elementbereich ermitteln mit:

$(element).scope()

oder

angular.element(element).scope()

Ich glaube nicht, dass es eine Möglichkeit gibt, alle Bereiche auf einer Seite leicht zu erhalten (außer vom Stammbereich abwärts zu navigieren). 

7
psyho

Sie sollten Ihre Anwendung im Google Chrome-Browser entwickeln (wenn Sie sie nicht bereits verwenden) und dann die fantastische Batarang-Erweiterung verwenden, die den Entwicklertools ein neues AngularJS-Bedienfeld hinzufügt. Sie können dort alle Bereiche sehen, welche Beziehungen zwischen ihnen bestehen und welcher Wert alle Attribute hat.

http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html

5
xMort

In Angulars gibt es $rootScope, das ist die Wurzel jedes Gültigkeitsbereichs. Es hat child field und die gesamte Hierarchie befindet sich in $ rootScope Probleme, da dieser Bereich isoliert Bereich sein kann. Möglicherweise haben Sie dort eine Direktive, deren Umfang isoliert ist. Wenn Sie so etwas haben, versuchen Sie,el.isolatedScope()zu verwenden.

0

Verwenden Sie in Chrome Entwicklerwerkzeuge. Ich verwende die Befehlszeile der Konsole. 

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

angular.element($0).scope()

oder klicken Sie einfach mit der rechten Maustaste auf ein Seitenelement und wählen Sie: inspect element.

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

So zeigen Sie einen übergeordneten Elementbereich an:

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

Sie können dies auch verketten:

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

Sie können den Stammbereich betrachten:

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

Wenn Sie eine Direktive mit Isolatbereich markiert haben, können Sie sie mit folgendem Befehl anzeigen:

$($0).isolateScope()

Falls verfügbar, können Sie dasselbe mit untergeordnetem und gleichrangigem Bereich tun.

$($0).scope().$sibling

Ich kann in den Bereichen nach oben und unten gehen, um zu überprüfen, in welchem ​​Bereich sich Controller, Objekte usw. befinden, und wenn Sie mit benutzerdefinierten Anweisungen arbeiten, ist dies unerlässlich. In einer großen Codebasis ist es nicht so einfach, solche Dinge zu finden. 

Vor kurzem hatte ich zwei Controller mit demselben Namen, abgesehen von einem Großbuchstaben, der an eine Ansicht angehängt wurde. Ich habe den falschen Controller verwendet, und es dauerte eine Weile, bis mir klar wurde, dass dies bei den Bindungen der Fall war.

0
James Drinkard