IMHO, die frustrierendste Erfahrung kommt vom Erhalten / Festlegen eines Werts eines bestimmten Bereichs, der sich auf ein visuelles Element bezieht. Ich habe viele Haltepunkte nicht nur in meinem eigenen Code, sondern auch in angle.js selbst gesetzt, aber manchmal ist es einfach nicht der effektivste Weg. Obwohl die folgenden Methoden sehr leistungsfähig sind, werden sie definitiv als schlechte Praxis angesehen, wenn Sie sie tatsächlich im Produktionscode verwenden. Verwenden Sie sie also mit Bedacht!
Holen Sie sich eine Referenz in der Konsole von einem visuellen Element
In vielen Nicht-IE-Browsern können Sie ein Element auswählen, indem Sie mit der rechten Maustaste auf ein Element klicken und auf "Element überprüfen" klicken. Alternativ können Sie beispielsweise auch in Chrome auf ein beliebiges Element auf der Registerkarte "Elemente" klicken. Das zuletzt ausgewählte Element wird in einer Variablen $0in der Konsole gespeichert .
Holen Sie sich einen Bereich, der mit einem Element verknüpft ist
Abhängig davon, ob eine Direktive vorhanden ist, die einen isolierten Bereich erstellt, können Sie den Bereich mit angular.element($0).scope()oder abrufen angular.element($0).isolateScope()(verwenden, $($0).scope()wenn $ aktiviert ist). Genau das erhalten Sie, wenn Sie die neueste Version von Batarang verwenden. Wenn Sie den Wert direkt ändern, denken Sie daran, scope.$digest()die Änderungen auf der Benutzeroberfläche wiederzugeben.
$ eval ist böse
Nicht unbedingt zum Debuggen. scope.$eval(expression)ist sehr praktisch, wenn Sie schnell überprüfen möchten, ob ein Ausdruck den erwarteten Wert hat.
Die fehlenden Prototyp-Mitglieder des Geltungsbereichs
Der Unterschied zwischen scope.blaund scope.$eval('bla')ist der erstere berücksichtigt nicht die prototypisch vererbten Werte. Verwenden Sie das folgende Snippet, um das gesamte Bild zu erhalten (Sie können den Wert nicht direkt ändern, aber Sie können ihn $evaltrotzdem verwenden!).
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))
}
};
Verwenden Sie es mit scopeEval($($0).scope()).
Wo ist mein Controller?
Manchmal möchten Sie möglicherweise die Werte überwachen, ngModelwenn Sie eine Direktive schreiben. Verwenden Sie $($0).controller('ngModel')und Sie werden das erhalten zu überprüfen $formatters, $parsers, $modelValue, $viewValue $renderund alles.