IMHO, l'esperienza più frustrante deriva dall'ottenere / impostare un valore di uno scopo specifico correlato a un elemento visivo. Ho creato molti punti di interruzione non solo nel mio codice, ma anche in angular.js stesso, ma a volte semplicemente non è il modo più efficace. Sebbene i metodi seguenti siano molto potenti, sono sicuramente considerati una cattiva pratica se effettivamente utilizzati nel codice di produzione, quindi usali con saggezza!
Ottieni un riferimento nella console da un elemento visivo
In molti browser non IE, è possibile selezionare un elemento facendo clic con il pulsante destro del mouse su un elemento e facendo clic su "Ispeziona elemento". In alternativa puoi anche fare clic su qualsiasi elemento nella scheda Elementi in Chrome, ad esempio. L'ultimo elemento selezionato verrà memorizzato nella variabile $0nella console.
Ottieni un ambito collegato a un elemento
A seconda che esista una direttiva che crea un ambito isolato, è possibile recuperare l'ambito con angular.element($0).scope()o angular.element($0).isolateScope()(utilizzare $($0).scope()se $ è abilitato). Questo è esattamente ciò che ottieni quando utilizzi l'ultima versione di Batarang. Se stai modificando direttamente il valore, ricordati di utilizzare scope.$digest()per riflettere le modifiche sull'interfaccia utente.
$ eval è il male
Non necessariamente per il debug. scope.$eval(expression)è molto utile quando si desidera controllare rapidamente se un'espressione ha il valore atteso.
I membri del prototipo mancanti dell'ambito
La differenza tra scope.blae scope.$eval('bla')è il primo non considera i valori ereditati dal prototipo. Usa lo snippet qui sotto per ottenere l'intera immagine (non puoi modificare direttamente il valore, ma puoi usarlo $evalcomunque!)
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))
}
};
Usalo con scopeEval($($0).scope()).
Dov'è il mio controller?
A volte potresti voler monitorare i valori ngModelquando scrivi una direttiva. Usa $($0).controller('ngModel')e si arriva a controllare il $formatters, $parsers, $modelValue, $viewValue $rendere tutto.