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

Elija un elemento en el panel HTML de las herramientas de desarrollo y escriba esto en la consola:

angular.element($0).scope()

In 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 alcance del nodo DOM seleccionado impreso 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 tal vez quieras revisar:

• Batarang. Esto ha existido por un tiempo.

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

Jugando con jsFiddle

Cuando trabaje con jsfiddle, puede abrir el violín en Mostrar modo agregando /show al final de la URL. Cuando se ejecuta de esta manera, tiene acceso a la angular global. Puedes probarlo aquí:

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

jQuery Lite

Si carga jQuery antes que AngularJS, angular.element se le puede pasar un selector jQuery. Entonces podría inspeccionar el alcance de un controlador con

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

de un boton

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

... y así.

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

Compruebe 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 fácil 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 almacena como $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 cromo. Ref- 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:

scope.$apply();

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

console.log($scope);

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

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

Luego en tu controlador

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

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

La sugerencia de @ jm- también funciona, pero no creo que funcione dentro de un 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 asigna un alias a su controlador, sus objetos de alcance estarán en un objeto dentro del objeto devuelto desde scope().

Por ejemplo, si su directiva de controlador se crea así: <div ng-controller="FormController as frm"> luego para acceder a un startDate propiedad de su controlador, llamaría angular.element($0).scope().frm.startDate

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 de forma predeterminada.

Si no está usando 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 actualmente seleccionado está disponible a través de la línea de comando API referencia $0. Tanto Firebug como Chrome tienen esta referencia.

Sin embargo, las herramientas de desarrollo 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 utilizando estas referencias. Se puede hacer referencia al elemento u objeto seleccionado más recientemente como $0, al segundo más reciente como $1 y así sucesivamente.

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

$($0).scope() devolverá el alcance asociado con el elemento. Puedes ver sus propiedades enseguida.

Algunas otras cosas que puedes usar son:

• Ver el alcance principal de un elemento:

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

• Puedes encadenar esto también:

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

• Puedes mirar el alcance de la raíz:

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

• Si resaltó una directiva con alcance aislado, puede mirarla con:

$($0).isolateScope()

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

Estoy de acuerdo en que lo mejor es Batarang con su $scope después 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 tienes tu alcance principal en el body elemento, 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;
}

en realidad necesitamos $scope más a menudo en el desarrollo que en la producción.

Ya lo mencionó @JasonGoemaat pero lo agregó como una respuesta adecuada a esta pregunta.

Inspeccione el elemento, luego use esto en la consola

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

Primero puede seleccionar un elemento del DOM que esté dentro del alcance que desea inspeccionar:

Luego puede ver el objeto de alcance consultando lo siguiente en la consola:

angular.element($0).scope()

Puede consultar cualquier propiedad en el alcance, por ejemplo:

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

O puede inspeccionar el controlador adjunto al alcance:

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

(Otra opción que puede funcionar es poner un punto de interrupción en su código. Si el $scope se encuentra actualmente en el ámbito actual de 'JavaScript simple y antiguo', entonces puede inspeccionar el valor de $scope en la consola.)

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

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

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

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

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

Digamos que desea acceder al alcance del elemento como

<div ng-controller="hw"></div>

Podrías usar lo siguiente en la consola:

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

Esto le dará el alcance en ese elemento.

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 <ui-view>, or <div>, 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 cromo

Esto también requiere la instalación de jQuery, pero funciona perfectamente para un entorno de desarrollo. Examina cada elemento para obtener las instancias de los ámbitos y luego los devuelve etiquetados con los nombres de los controladores. También elimina cualquier propiedad que comience con $, que es lo que angularjs generalmente usa para su configuración.

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

en angular obtenemos el elemento jquery por angular.element().... vamos a c...

angular.element().scope();

ejemplo:

<div id=""></div>

Solo con fines de depuración, puse esto al inicio del controlador.

   window.scope = $scope;

  $scope.today = new Date();

Y así es como lo uso.

luego elimínelo cuando termine de depurar.

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

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

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

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