angularjs-scope simple - Come posso accedere alla variabile $ scope nella console del browser usando AngularJS?

Di solito uso la funzione jQuery data () per questo:

$($0).data().$scope

$ 0 è attualmente selezionato in chrome DOM inspector. $ 1, $ 2 .. e così via sono elementi precedentemente selezionati.

Basta definire una variabile JavaScript al di fuori dell'ambito e assegnarla al tuo scope nel tuo controller:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

Questo è tutto! Dovrebbe funzionare in tutti i browser (testato almeno in Chrome e Mozilla).

Funziona e sto usando questo metodo.

Per migliorare la risposta di jm ...

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

O se usi jQuery, questo fa la stessa cosa ...

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

Un altro modo semplice per accedere a un elemento DOM dalla console (come menzionato da jm) è di fare clic su di esso nella scheda 'elementi' e viene automaticamente salvato come $0 .

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

Scegli un elemento nel pannello HTML degli strumenti di sviluppo e digita questo nella console:

angular.element($0).scope()

In WebKit e Firefox, $0 è un riferimento al nodo DOM selezionato nella scheda degli elementi, in questo modo si ottiene l'ambito del nodo DOM selezionato stampato nella console.

Puoi anche indirizzare lo scope in base all'ID dell'elemento, in questo modo:

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

Addons / Estensioni

Ci sono alcune estensioni di Chrome molto utili che potresti voler controllare:

• Batarang . Questo è stato intorno per un po '.

• ng-inspector . Questo è il più recente e, come suggerisce il nome, ti permette di ispezionare gli ambiti della tua applicazione.

Giocare con jsFiddle

Quando lavori con jsfiddle puoi aprire il violino in modalità show aggiungendo /show alla fine dell'URL. Quando si esegue in questo modo si ha accesso angular globale. Puoi provarlo qui:

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

jQuery Lite

Se carichi jQuery prima di AngularJS, angular.element può essere passato a un selettore jQuery. Quindi è possibile ispezionare l'ambito di un controller con

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

Di un pulsante

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

... e così via.

In realtà potresti voler utilizzare una funzione globale per renderla più semplice:

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

Ora puoi farlo

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Controlla qui: http://jsfiddle.net/jaimem/DvRaR/1/show/

Sono d'accordo che il migliore è Batarang con il suo $scope dopo aver selezionato un oggetto (è lo stesso di angular.element($0).scope() o anche più corto con jQuery: $($0).scope() (il mio preferito))

Inoltre, se come me hai il tuo scopo principale sull'elemento body , un $('body').scope() funziona correttamente.

Ho usato angular.element($(".ng-scope")).scope(); in passato e funziona benissimo. È utile solo se nella pagina è presente un solo ambito dell'app o puoi fare qualcosa del tipo:

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

Per aggiungere e migliorare le altre risposte, nella console, immettere $($0) per ottenere l'elemento. Se si tratta di un'applicazione Angularjs, una versione lite di jQuery viene caricata di default.

Se non stai usando jQuery, puoi usare angular.element ($ 0) come in:

angular.element($0).scope()

Per verificare se hai jQuery e la versione, esegui questo comando nella console:

$.fn.jquery

Se hai ispezionato un elemento, l'elemento attualmente selezionato è disponibile tramite il riferimento API della riga di comando $ 0. Firebug e Chrome hanno questo riferimento.

Tuttavia, gli strumenti di sviluppo di Chrome renderanno disponibili gli ultimi cinque elementi (o oggetti heap) selezionati tramite le proprietà denominate $ 0, $ 1, $ 2, $ 3, $ 4 utilizzando questi riferimenti. L'elemento o l'oggetto selezionato più di recente può essere referenziato come $ 0, il secondo più recente come $ 1 e così via.

Ecco il riferimento API della riga di comando per Firebug che elenca i suoi riferimenti.

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

Alcune altre cose che puoi usare sono:

• Visualizza l'ambito genitore di un elemento:

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

• Puoi concatenare anche questo:

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

• È possibile esaminare l'ambito di base:

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

• Se hai evidenziato una direttiva con ambito isolato, puoi guardarla con:

$($0).isolateScope()

Vedi Suggerimenti e trucchi per il debug di codice Angularjs non familiare per ulteriori dettagli ed esempi.

Un avvertimento a molte di queste risposte: se si alias il controller, gli oggetti scope saranno in un oggetto all'interno dell'oggetto restituito da scope() .

Ad esempio, se la direttiva del controller è stata creata in questo modo: <div ng-controller="FormController as frm"> quindi per accedere a una proprietà startDate del controller, si chiamerà angular.element($0).scope().frm.startDate

in angolare otteniamo l'elemento jquery di angular.element () .... lascia c ...

angular.element().scope();

esempio:

<div id=""></div>

Da qualche parte nel tuo controller (spesso l'ultima riga è un buon posto), put

console.log($scope);

Se vuoi vedere un ambito interiore / implicito, ad esempio all'interno di una ng-repeat, qualcosa del genere funzionerà.

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

Quindi nel tuo controller

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

Nota che sopra definiamo la funzione showScope () nell'ambito genitore, ma va bene ... l'ambito child / inner / implicit può accedere a quella funzione, che quindi stampa l'ambito in base all'evento, e quindi l'ambito associato a l'elemento che ha licenziato l'evento.

Il suggerimento di @ jm funziona anche, ma non penso che funzioni all'interno di jsFiddle. Ottengo questo errore su jsFiddle all'interno di Chrome:

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

Alla console di Chrome:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

Esempio

angular.element($0).scope().a
angular.element($0).scope().b

Console di Chrome

Questo è un modo per ottenere lo scope senza Batarang, puoi fare:

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

O se vuoi trovare il tuo scope per nome del controller, fai questo:

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

Dopo aver apportato modifiche al tuo modello, dovrai applicare le modifiche al DOM chiamando:

scope.$apply();

Assegna $scope come variabile globale. Problema risolto.

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

In realtà abbiamo bisogno di $scope più spesso nello sviluppo che nella produzione.

Menzionato già da @JasonGoemaat ma aggiungendolo come risposta adatta a questa domanda.

Quando si utilizza as sintassi, come ParentController as parentCtrl , per definire un controller, quindi per accedere alla variabile dell'ambito padre nell'uso del controller figlio, seguire:

var id = $scope.parentCtrl.id;

Dove parentCtrl è il nome del controllore padre che utilizza as sintassi e id è una variabile definita nello stesso controller.