AngularJS: accedere allo scope di un elemento dalla console di Chrome

A volte quando si debugga un applicazione AngularJS, può essere utile visualizzare lo scope di un elemento, ci sono delle estensioni che fanno questo (e molto altro…) come Batarang e ng-inspector, queste estensioni sono scaricabili dallo store di Chrome, ma trovo spesso più immediato accedere a queste informazioni direttamente dalla console Javascript.

Se ti stai chiedendo come fare questo è il post per te.

Passaggi:

1) Apri la console di sviluppo di Chrome (F12) e seleziona l’elemento di cui si vuole esplorare lo scope

1

2) Aprire la console Javascript e digitare:

2

angular.element($0).scope()

dove $0 è proprio l’elemento selezionato precedentemente.

Se si vuole selezionare un qualsiasi altro elemento possiamo sostituire $0 con un qualsiasi selettore, ad esempio se vogliamo visualizzare lo scope dell’elemento che ha id “elementId”, digitiamo:

angular.element($("#elementId")).scope()

Questo breve guida si conclude qui, visitate ancora questo blog per altre pillole su AngularJS!