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