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


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


1123
2017-12-06 11:52


origen


Respuestas:


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 alcance del nodo DOM seleccionado impreso en la consola.

También puede orientar el alcance 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 espectáculo modo al agregar /show al final de la URL. Cuando se ejecuta así, tiene acceso a la angular global. Puedes intentarlo aquí:

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

jQuery Lite

Si carga jQuery antes de AngularJS, angular.element se puede pasar un selector jQuery. Para que pueda inspeccionar el alcance 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

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


1613
2017-12-06 12:56



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

173
2018-04-02 04:49



Si tienes 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


70
2017-09-06 16:36



Esta es una forma de obtener alcance sin Batarang, puede 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 al:

scope.$apply();

32
2018-06-04 17:02



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á.

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

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 alcance en función del evento y, por lo tanto, el alcance 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


28
2017-12-06 21:16



Una advertencia para 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 startDate propiedad de su controlador, usted llamaría angular.element($0).scope().frm.startDate


9
2018-02-24 04:00



Estoy de acuerdo 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, a $('body').scope() funciona bien.


8
2018-01-23 23:54



Solo 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 a menudo en el desarrollo que en la producción.

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


4
2017-11-01 16:26



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.


3
2017-08-03 20:53



Inspeccione el elemento, luego use esto en la consola

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

3
2017-12-07 15:54