simple angularjs project download
Come posso accedere alla variabile $ scope nella console del browser usando AngularJS? (12)
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
Vorrei accedere alla mia variabile $scope
nella console JavaScript di Chrome. Come lo faccio?
Non riesco a vedere $scope
né il nome del mio modulo myapp
nella console come variabili.
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.
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
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.
Inserisci un punto di interruzione nel codice in un punto vicino a un riferimento alla variabile $ scope (in modo che $ scope si trovi nell'attuale scope "plain old JavaScript"). Quindi puoi controllare il valore $ scope nella console.
Ispeziona l'elemento, quindi usalo nella console
s = $($0).scope()
// `s` is the scope object if it exists
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();
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();
Se hai installato Batarang
Quindi puoi semplicemente scrivere:
$scope
quando hai l'elemento selezionato nella vista elementi in chrome. Rif: https://github.com/angular/angularjs-batarang#console
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.
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>