for - scope on angularjs

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

Question

Me gustaría acceder a mi variable de $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.

Answer 1

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.

Answer 2

Digamos que quieres 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.

Answer 3

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/

Answer 4

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

Answer 5

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

angular.element().scope();

ejemplo:

<div id=""></div>

Answer 6

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

Answer 7

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

Answer 8

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 ámbito de aplicación principal en el elemento body , un $(''body'').scope() funciona bien.

Answer 9

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

Answer 10

Inspecciona el elemento, luego usa esto en la consola.

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

Answer 11

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.

Answer 12

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

Answer 13

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

Answer 14

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.

Answer 15

Simplemente defina una variable de JavaScript fuera del alcance y asignela a su alcance 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.

Answer 16

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

Answer 17

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.