angularjs - for - variable angular js




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

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.

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.


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.


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


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

angular.element().scope();

ejemplo:

<div id=""></div>


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

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.


Inspecciona el elemento, luego usa 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 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.



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.


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


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.





angularjs-scope