In AngularJS, come trovi tutti gli ambiti su una pagina?

Question

Una volta che abbiamo una portata in mano, possiamo navigare alla sua radice ed esplorare la gerarchia dell'ambito.

Ma c'è un modo diretto per trovare tutti gli ambiti su una pagina?

Allo stesso modo, dato un elemento HTML, esiste un modo diretto per trovare l'ambito che lo racchiude?

Answer 1

è possibile vedere tutti gli ambiti sulla pagina utilizzando questo selettore CSS

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

e tutte le associazioni:

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

È quindi possibile recuperare convertendo l'elemento DOM in selettore

var selector = angular.element(some_dom_element); 

quindi utilizzare il selettore per retrive la portata/regolatore/iniettore

var scope = selector.scope(); 
var controller = selector.controller(); 
var injector = selector.injector(); 

Answer 2

Si può scoprire un ambito per elemento utilizzando:

$(element).scope() 

o

angular.element(element).scope() 

Non credo ci sia un modo per ottenere tutti gli ambiti di una pagina facilmente (diverso da navigare giù dall'ambito di root).

Answer 3

Non so perché questo sarebbe utile a voi, ma si può fare questo:

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

L'altra opzione è quella di attraversare l'albero campo di applicazione a partire dalla portata principale utilizzando le nostre API private: $ $ childHead e $$ nextSibling.

E 'più probabile che si desidera solo per vedere dove i confini di ambito sono e si può farlo con questo:

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

allora si può solo usare web inspector per selezionare un elemento di interesse e ottenere la sua portata da:

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

Answer 4

Dovresti sviluppare la tua applicazione nel browser Google Chrome (se non la usi già) e poi usare la fantastica estensione Batarang che aggiunge il nuovo pa dedicato AngularJS nel per gli strumenti di sviluppo. Puoi vedere tutti gli ambiti lì, quali sono le relazioni tra loro e quale valore ha tutti i suoi attributi.

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

Answer 5

mi raccomando AngularJS Batarang. È uno strumento di debug che consente di visualizzare tutti gli ambiti della pagina (tra le altre cose).

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

Answer 6

Non tutti gli ambiti sono tenuti ad elementi.Se si desidera che tutti i ambiti sulla pagina, a piedi l'albero campo di applicazione in questo modo:

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) 

Answer 7

In Angolari c'è $rootScope, che è la radice di ogni scope.It ha bambino campo e tutta la gerarchia è dentro $ rootScope. Se si desidera trovare un ambito con l'elemento html, si avrà probabilmente un problema, poiché tale ambito può essere isolato. Se si dispone di una direttiva, l'ambito è isolato. Se si dispone di qualcosa come provate a usare el.isolatedScope()

Answer 8

In Chrome, utilizzando gli strumenti di sviluppo. Io uso la riga di comando della console.

scegliere un elemento nel pannello HTML delle strumenti di sviluppo e digitare questo nella console:

angular.element($0).scope() 

o semplicemente fare clic destro su un elemento della pagina e selezionare: ispezionare elemento.

$($0).scope() restituirà l'ambito associato all'elemento. Puoi vedere le sue proprietà subito.

Per visualizzare un ambito elementi genitore:

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

È possibile concatenare anche questo:

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

Potete guardare il campo di applicazione della radice:

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

Se hai evidenziato un direttiva con ambito isolato, puoi guardarlo con:

$($0).isolateScope() 

Se disponibile, è possibile fare lo stesso con l'ambito figlio e l'ambito fratello.

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

posso camminare su e giù per gli ambiti per verificare quali possibilità ha quello controller, oggetti, ecc, e quando si lavora con le direttive su misura, è essenziale. In una grande base di codice, non è così facile trovare cose come questa.

Recentemente, ho avuto due controller con lo stesso nome, salvo per una lettera maiuscola allegata a una vista. Stavo usando il controller sbagliato e ci è voluto un po 'prima che mi rendessi conto che era il problema con i miei binding.