En mi humilde opinión, la experiencia más frustrante proviene de obtener / establecer un valor de un alcance específico relacionado con un elemento visual. Hice muchos puntos de interrupción no solo en mi propio código, sino también en angular.js, pero a veces simplemente no es la forma más efectiva. Aunque los métodos a continuación son muy poderosos, definitivamente se consideran una mala práctica si realmente los usa en el código de producción, ¡así que úselos sabiamente!
Obtener una referencia en la consola de un elemento visual
En muchos navegadores que no son IE, puede seleccionar un elemento haciendo clic con el botón derecho en un elemento y haciendo clic en "Inspeccionar elemento". Alternativamente, también puede hacer clic en cualquier elemento en la pestaña Elementos en Chrome, por ejemplo. El último elemento seleccionado se almacenará en variable$0 en la consola.
Obtener un alcance vinculado a un elemento
Dependiendo de si existe una directiva que crea un alcance aislado, puede recuperar el alcance mediante angular.element($0).scope()o angular.element($0).isolateScope()(usar $($0).scope()si $ está habilitado). Esto es exactamente lo que obtiene cuando usa la última versión de Batarang. Si está cambiando el valor directamente, recuerde usarscope.$digest() para reflejar los cambios en la IU.
$ eval es malvado
No necesariamente para depurar. scope.$eval(expression)es muy útil cuando desea comprobar rápidamente si una expresión tiene el valor esperado.
Los miembros prototipo que faltan del alcance
La diferencia entre scope.blay scope.$eval('bla')es que el primero no considera los valores heredados prototípicamente. Use el fragmento de abajo para obtener la imagen completa (no puede cambiar directamente el valor, pero puede usarlo de $evaltodos modos).
scopeCopy = function (scope) {
var a = {};
for (x in scope){
if (scope.hasOwnProperty(x) &&
x.substring(0,1) !== '$' &&
x !== 'this') {
a[x] = angular.copy(scope[x])
}
}
return a
};
scopeEval = function (scope) {
if (scope.$parent === null) {
return hoho(scope)
} else {
return angular.extend({}, haha(scope.$parent), hoho(scope))
}
};
Úselo con scopeEval($($0).scope()) .
¿Dónde está mi controlador?
A veces, es posible que desee controlar los valores ngModelcuando escribe una directiva. Uso $($0).controller('ngModel')y se llega a comprobar el $formatters, $parsers, $modelValue, $viewValue $rendery todo.