À mon humble avis, l'expérience la plus frustrante vient de l'obtention / de la définition d'une valeur d'une portée spécifique liée à un élément visuel. J'ai fait beaucoup de points d'arrêt non seulement dans mon propre code, mais aussi dans angular.js lui-même, mais parfois ce n'est tout simplement pas le moyen le plus efficace. Bien que les méthodes ci-dessous soient très puissantes, elles sont définitivement considérées comme une mauvaise pratique si vous les utilisez réellement dans du code de production, alors utilisez-les à bon escient!
Obtenir une référence dans la console à partir d'un élément visuel
Dans de nombreux navigateurs non IE, vous pouvez sélectionner un élément en cliquant avec le bouton droit sur un élément et en cliquant sur "Inspecter l'élément". Vous pouvez également cliquer sur n'importe quel élément dans l'onglet Éléments de Chrome, par exemple. Le dernier élément sélectionné sera stocké dans la variable $0de la console.
Obtenir une portée liée à un élément
Selon qu'il existe une directive qui crée une étendue d'isolement, vous pouvez récupérer la portée par angular.element($0).scope()ou angular.element($0).isolateScope()(à utiliser $($0).scope()si $ est activé). C'est exactement ce que vous obtenez lorsque vous utilisez la dernière version de Batarang. Si vous modifiez la valeur directement, n'oubliez pas d'utiliser scope.$digest()pour refléter les modifications sur l'interface utilisateur.
$ eval est mauvais
Pas nécessairement pour le débogage. scope.$eval(expression)est très pratique lorsque vous souhaitez vérifier rapidement si une expression a la valeur attendue.
Les prototypes manquants de la portée
La différence entre scope.blaet scope.$eval('bla')est le premier ne tient pas compte des valeurs héritées prototypiquement. Utilisez l'extrait ci-dessous pour obtenir une vue d'ensemble (vous ne pouvez pas modifier directement la valeur, mais vous pouvez l'utiliser $evalquand même!)
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))
}
};
Utilisez-le avec scopeEval($($0).scope()).
Où est mon contrôleur?
Parfois, vous souhaiterez peut-être surveiller les valeurs ngModellorsque vous écrivez une directive. L' utilisation $($0).controller('ngModel')et vous obtiendrez de vérifier la $formatters, $parsers, $modelValue, $viewValue $renderet tout.