Acceder al scope de AngularJS desde la consola del navegador

Acceder al scope de AngularJS desde la consola del navegador

Hoy he necesitado hacer unas pruebas y correcciones en el código de un proyecto pero no tenía acceso a la VPN, así que no podía entrar ni a los entornos de pruebas ni al repositorio de código.

Se trataba de una aplicación hecha con AngularJS, así que se me ha ocurrido que, al ser Javascript, a lo mejor podía acceder a las variables desde la consola y hacer las pruebas directamente desde el navegador.

Un tal Michal hablaba de cómo obtener referencias al $scope en esta entrada de su blog. Siguiendo sus ejemplos he conseguido lo que necesitaba, así que lo dejo aquí por si a alguien le sirve:

Una cosa que no sabía es que AngularJS añade a jQuery algunas opciones y utilidades, como la que vais a ver a continuación. Podemos obtener el nodo jQuery del que queremos sacar el $scope, y luego llamar a su método scope, que ha sido añadido por Angular para facilitarnos la vida. Veamos:

var $scope = $('#nuestro_elemento').scope()

Otra forma de conseguir el $scope es utilizar la función element de AngularJS, que espera el nodo asociado. Este parámetro podemos pasarlo de distintas formas, como por ejemplo:

// Mediante el selector CSS
var nodo = '#nuestro_elemento';

// Mediante el nodo jQuery 
var nodo = $('#nuestro_elemento'); 

// Mediante el nodo del DOM
var nodo = document.getElementById('nuestro_elemento');

// Obtenemos el $scope 
var $scope = angular.element(nodo).scope();

Una vez lo tenemos podemos, por ejemplo, modificar una función de validación para que diga que los datos siempre son correctos:

$scope.nombre = 'Luis';
$scope.esNombreValido = function() { return true; }

// Notificamos a AngularJS para que se entere
// de los cambios 
$scope.$apply()

Leyendo la documentación seguro que hay muchas más cosas interesantes para contar, pero eso ya lo dejo para otro día.

Hasta la próxima! 🙂