¿Cómo accedo a la variable $ scope en la consola del navegador usando AngularJS?

Me gustaría acceder a mi variable $scope en la consola de JavaScript de Chrome. ¿Cómo puedo hacer eso?

No puedo ver $scope ni el nombre de mi módulo myapp en la consola como variables.

Elija un elemento en el panel HTML de las herramientas de desarrollador y escríbalo en la consola:

 angular.element($0).scope() 

En WebKit y Firefox, $0 es una referencia al nodo DOM seleccionado en la pestaña de elementos, por lo que al hacer esto obtiene el scope del nodo DOM seleccionado impreso en la consola.

También puede orientar el scope por ID del elemento, de esta forma:

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

Complementos / Extensiones

Hay algunas extensiones de Chrome muy útiles que es posible que desee verificar:

  • Batarang . Esto ha existido por un tiempo.

  • ng-inspector . Este es el más nuevo y, como su nombre lo indica, le permite inspeccionar los ámbitos de su aplicación.

Jugando con jsFiddle

Cuando trabaje con jsfiddle, puede abrir el violín en modo de espectáculo agregando /show al final de la URL. Cuando se ejecuta así, tiene acceso al angular mundial. Puedes intentarlo aquí:

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

jQuery Lite

Si carga jQuery antes de AngularJS, angular.element puede pasar un selector jQuery. Para que pueda inspeccionar el scope de un controlador con

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

De un botón

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

… y así.

En realidad, es posible que desee utilizar una función global para que sea 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á utilizando jQuery, esto hace lo mismo …

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

Otra manera fácil de acceder a un elemento DOM desde la consola (como mencioné jm) es hacer clic en la pestaña ‘elementos’ y automáticamente se almacena como $0 .

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

Si ha instalado Batarang

Entonces solo puedes escribir:

 $scope 

cuando tienes el elemento seleccionado en la vista de elementos en chrome. Ref – https://github.com/angular/angularjs-batarang#console

Esta es una forma de obtener scope sin Batarang, puede hacer:

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

O si desea encontrar su scope 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 al:

 scope.$apply(); 

En algún lugar de su controlador (a menudo la última línea es un buen lugar), ponga

 console.log($scope); 

Si desea ver un ámbito interno / implícito, digamos dentro de una repetición ng, algo así funcionará.

 
  • ... show scope
  • Entonces en tu controlador

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

    Tenga en cuenta que anteriormente definimos la función showScope () en el ámbito primario, pero está bien … el ámbito secundario / interno / implícito puede acceder a esa función, que luego imprime el scope en función del evento y, por lo tanto, el scope asociado con el elemento que disparó el evento.

    La sugerencia de @jm también funciona, pero no creo que funcione dentro de jsFiddle. Recibo este error en jsFiddle dentro de Chrome:

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

    Una advertencia para muchas de estas respuestas: si alias tu controlador, tus objetos de ámbito estarán en un objeto dentro del objeto devuelto desde el scope() .

    Por ejemplo, si su directiva de controlador se crea de la siguiente manera:

    entonces para acceder a la propiedad startDate de su controlador, debe llamar a angular.element($0).scope().frm.startDate

    Acepto que lo mejor es Batarang con su $scope luego de seleccionar un objeto (es lo mismo que angular.element($0).scope() o incluso más corto con jQuery: $($0).scope() (mi favorito)

    Además, si, como yo, tiene su scope principal en el elemento del body , un $('body').scope() funciona bien.

    Simplemente asigne $scope como una variable global. Problema resuelto.

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

    De hecho, necesitamos $scope más frecuencia en el desarrollo que en la producción.

    Ya mencionado por @JasonGoemaat, pero lo agrega como una respuesta adecuada a esta pregunta.

    Usualmente uso la función jQuery data () para eso:

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

    El $ 0 es el elemento seleccionado actualmente en el inspector DOM de Chrome. $ 1, $ 2 … y así sucesivamente son elementos seleccionados previamente.

    Inspeccione el elemento, luego use esto en la consola

     s = $($0).scope() // `s` is the scope object if it exists 

    Para agregar y mejorar las otras respuestas, en la consola, ingrese $($0) para obtener el elemento. Si se trata de una aplicación Angularjs, se carga una versión jQuery lite por defecto.

    Si no está utilizando jQuery, puede usar angular.element ($ 0) como en:

     angular.element($0).scope() 

    Para verificar si tiene jQuery y la versión, ejecute este comando en la consola:

     $.fn.jquery 

    Si ha inspeccionado un elemento, el elemento seleccionado actualmente está disponible a través de la referencia de API de línea de comando $ 0. Tanto Firebug como Chrome tienen esta referencia.

    Sin embargo, las herramientas para desarrolladores de Chrome pondrán a disposición los últimos cinco elementos (u objetos del montón) seleccionados a través de las propiedades denominadas $ 0, $ 1, $ 2, $ 3, $ 4 usando estas referencias. El elemento u objeto seleccionado más recientemente se puede referenciar como $ 0, el segundo más reciente como $ 1 y así sucesivamente.

    Aquí está la referencia de la API de línea de comandos para Firebug que enumera sus referencias.

    $($0).scope() devolverá el scope asociado con el elemento. Puede ver sus propiedades de inmediato.

    Algunas otras cosas que puedes usar son:

    • Ver un scope principal de elementos:

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

    • Puedes encadenar esto también:

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

    • Puedes mirar el scope de la raíz:

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

    • Si destacó una directiva con scope aislado, puede verla con:

    $($0).isolateScope()

    Consulte Consejos y trucos para depurar el código Angularjs desconocido para obtener más detalles y ejemplos.

    He utilizado angular.element($(".ng-scope")).scope(); en el pasado y funciona genial. Solo es bueno si solo tiene un scope de aplicación en la página, o puede hacer algo como:

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

    Digamos que quiere acceder al scope del elemento como

     

    Puede usar lo siguiente en la consola:

     angular.element(document.querySelector('[ng-controller=hw]')).scope(); 

    Esto le dará el scope en ese elemento.

    Ponga un punto de interrupción en su código en un lugar cercano a una referencia a la variable $ scope (de modo que $ scope se encuentre en el scope actual de ‘JavaScript antiguo simple’). Luego, puede inspeccionar el valor de $ scope en la consola.

    en angular obtenemos elemento jquery por angular.element () …. permite c …

    angular.element().scope();

    ejemplo:

    En la consola de Chrome:

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

    Ejemplo

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

    Consola de Chrome enter image description here

    Simplemente defina una variable de JavaScript fuera del scope y asígnela a su scope en su controlador:

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

    ¡Eso es! Debería funcionar en todos los navegadores (probado al menos en Chrome y Mozilla).

    Está funcionando, y estoy usando este método.