¿Cómo accedo a la variable $scope en la consola del navegador usando AngularJS?
Me gustaría acceder a mi $scopevariable en la consola JavaScript de Chrome. ¿Cómo puedo hacer eso?
No puedo ver $scopeni el nombre de mi módulo myappen la consola como variables.
Elija un elemento en el panel HTML de las herramientas de desarrollo y escríbalo en la consola:
angular.element($0).scope()
En WebKit y Firefox, $0hay una referencia al nodo DOM seleccionado en la pestaña de elementos, por lo que al hacer esto se imprime el alcance del nodo DOM seleccionado en la consola.
También puede orientar el alcance por ID de elemento, así:
angular.element(document.getElementById('yourElementId')).scope()
Complementos/Extensiones
Hay algunas extensiones de Chrome muy útiles que quizás quieras consultar:
Batarang . Esto existe desde hace un tiempo.
ng-inspector . Este es el más nuevo y, como sugiere el nombre, le permite inspeccionar los alcances de su aplicación.
Jugando con jsFiddle
Cuando trabaja con jsfiddle, puede abrir el violín en modo de presentación agregando /showal final de la URL. Cuando se ejecuta así, tiene acceso al angularglobal. Puedes probarlo aquí:
http://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite
Si carga jQuery antes que AngularJS, angular.elementse le puede pasar un selector de jQuery. Entonces podrías inspeccionar el alcance de un controlador con
angular.element('[ng-controller=ctrl]').scope()
de un boton
angular.element('button:eq(1)').scope()
... etcétera.
Es posible que desee utilizar una función global para hacerlo más fácil:
window.SC = function(selector){
return angular.element(selector).scope();
};
Ahora podrías hacer esto
SC('button:eq(10)')
SC('button:eq(10)').row // -> value of scope.row
Consulte aquí: http://jsfiddle.net/jaimem/DvRaR/1/show/
Para mejorar la respuesta de 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 si estás usando jQuery, esto hace lo mismo...
$('#elementId').scope();
$('#elementId').scope().$apply();
Otra forma sencilla de acceder a un elemento DOM desde la consola (como mencionó jm) es hacer clic en él en la pestaña "elementos" y automáticamente se almacenará como archivo $0.
angular.element($0).scope();
Si tienes instalado Batarang
Entonces puedes simplemente escribir:
$scope
cuando tienes el elemento seleccionado en la vista de elementos en Chrome. Referencia: https://github.com/angular/angularjs-batarang#console
Esta es una forma de llegar al alcance sin Batarang, puedes hacer:
var scope = angular.element('#selectorId').scope();
O si desea encontrar su alcance por nombre de controlador, haga esto:
var scope = angular.element('[ng-controller=myController]').scope();
Después de realizar cambios en su modelo, deberá aplicar los cambios al DOM llamando a:
scope.$apply();
