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

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

La consola de chrome

Coloque un punto de interrupción en su código en algún lugar cercano a una referencia a la variable $ scope (de modo que el $ scope esté en el alcance actual del "JavaScript antiguo"). Entonces puedes inspeccionar el valor de $ scope en la consola.

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

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

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

Una advertencia a muchas de estas respuestas: si alias tu controlador, tus 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 la propiedad startDate de su controlador, debería llamar angular.element($0).scope().frm.startDate

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

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

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

Ya mencionado por @JasonGoemaat, pero agregándolo como una respuesta adecuada a esta pregunta.

Si tiene instalado Batarang

Entonces puedes escribir:

$scope

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

He utilizado angular.element($(".ng-scope")).scope(); En el pasado y funciona muy bien. Solo está bien si solo tiene un ámbito 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();

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 que dentro de una repetición ng, algo así funcionará.

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

Luego en tu control

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 principal, pero está bien ... el alcance secundario / interno / implícito puede acceder a esa función, que luego imprime el alcance en función del evento y, por lo tanto, el alcance asociado con El elemento que encendió el evento.

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

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

Elija un elemento en el panel HTML de las herramientas del desarrollador y escriba esto 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, 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 tal vez quieras revisar:

• Batarang . Esto ha existido por un tiempo.

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

Jugando con jsFiddle

Cuando trabaje con jsfiddle, puede abrir el violín en modo mostrar agregando /show al final de la URL. Cuando corres así tienes acceso al angular global. Puedes probarlo aquí:

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

jQuery Lite

Si carga jQuery antes de AngularJS, angular.element puede pasar un selector de jQuery. Para que pueda 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 que sea más fácil:

window.SC = function(selector){
    return angular.element(selector).scope();
};

Ahora puedes hacer esto

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

Consulte aquí: http://jsfiddle.net/jaimem/DvRaR/1/show/

Esta es una forma de llegar al alcance sin Batarang, puedes hacerlo:

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

O si desea encontrar su alcance por nombre de controlador, haga lo siguiente:

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();

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 se mencionó jm) es haciendo clic en él en la pestaña 'elementos', y se almacena automáticamente como $0 .

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

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

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 la línea de comandos $ 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 de pila) seleccionados a través de las propiedades denominadas $ 0, $ 1, $ 2, $ 3, $ 4 usando estas referencias. El elemento u objeto seleccionado más recientemente puede ser referenciado 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 alcance asociado con el elemento. Puedes ver sus propiedades de inmediato.

Algunas otras cosas que puedes usar son:

• Ver un alcance padre elementos:

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

• Puedes encadenar esto también:

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

• Puedes mirar el alcance de la raíz:

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

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

$($0).isolateScope()

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

En angular obtenemos jquery element por angular.element () .... v ...

angular.element().scope();

ejemplo:

<div id=""></div>

Me gustaría agregar un ejemplo de herencia prototípica con javascript a la respuesta de @Scott Driscoll. Usaremos un patrón de herencia clásico con Object.create () que es parte de la especificación EcmaScript 5.

Primero creamos la función de objeto "Padre"

function Parent(){

}

Luego agregue un prototipo a la función de objeto "Padre"

 Parent.prototype = {
 primitive : 1,
 object : {
    one : 1
   }
}

Crear la función de objeto "Child"

function Child(){

}

Asignar prototipo secundario (Hacer prototipo secundario heredado del prototipo principal)

Child.prototype = Object.create(Parent.prototype);

Asignar el constructor de prototipo "Niño" adecuado

Child.prototype.constructor = Child;

Agregue el método "changeProps" a un prototipo secundario, que reescribirá el valor de la propiedad "primitiva" en el objeto secundario y cambiará el valor de "object.one" tanto en el objeto primario como en el primario.

Child.prototype.changeProps = function(){
    this.primitive = 2;
    this.object.one = 2;
};

Inicia los objetos Padre (papá) y Niño (hijo).

var dad = new Parent();
var son = new Child();

Método de cambio de hijo de Call (hijo)

son.changeProps();

Revisa los resultados.

La propiedad primitiva padre no cambió

console.log(dad.primitive); /* 1 */

Propiedad primitiva del niño cambiada (reescrita)

console.log(son.primitive); /* 2 */

Se modificaron las propiedades del objeto primario y secundario.

console.log(dad.object.one); /* 2 */
console.log(son.object.one); /* 2 */

Ejemplo de trabajo aquí http://jsbin.com/xexurukiso/1/edit/

Más información sobre Object.create aquí https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create