AngularJS kann unter anderem einen Filter auf einen bestimmten Datenbindungsausdruck anwenden. Dies ist eine bequeme Möglichkeit, um beispielsweise die kulturspezifische Währung oder die Datumsformatierung der Eigenschaften eines Modells anzuwenden. Es ist auch schön, berechnete Eigenschaften für den Bereich zu haben. Das Problem ist, dass keine dieser Funktionen mit Zwei-Wege-Datenbindungsszenarien funktioniert - nur Ein-Wege-Datenbindung vom Bereich bis zur Ansicht. Dies scheint eine krasse Auslassung in einer ansonsten hervorragenden Bibliothek zu sein - oder fehlt mir etwas?
In KnockoutJS konnte ich eine berechnete Lese- / Schreib-Eigenschaft erstellen, mit der ich ein Funktionspaar angeben konnte, eine, die aufgerufen wird, um den Wert der Eigenschaft abzurufen, und eine, die aufgerufen wird, wenn die Eigenschaft festgelegt wird. Auf diese Weise konnte ich beispielsweise kulturbewusste Eingaben implementieren. Der Benutzer konnte "$ 1.24" eingeben und diese in einen Float im ViewModel analysieren und Änderungen im ViewModel in der Eingabe widerspiegeln.
Das Nächste, was ich ähnlich finden könnte, ist die Verwendung von $scope.$watch(propertyName, functionOrNGExpression);
Dies ermöglicht es mir, eine Funktion aufzurufen, wenn sich eine Eigenschaft in den $scope
Änderungen ändert. Dies löst jedoch beispielsweise nicht das kulturbewusste Eingabeproblem. Beachten Sie die Probleme, wenn ich versuche, die $watched
Eigenschaft innerhalb der $watch
Methode selbst zu ändern :
$scope.$watch("property", function (newValue, oldValue) {
$scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
$scope.property = Globalize.parseFloat(newValue);
});
( http://jsfiddle.net/gyZH8/2/ )
Das Eingabeelement wird sehr verwirrt, wenn der Benutzer mit der Eingabe beginnt. Ich habe es verbessert, indem ich die Eigenschaft in zwei Eigenschaften aufgeteilt habe, eine für den nicht analysierten Wert und eine für den analysierten Wert:
$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
$scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
$scope.hiddenProperty = Globalize.parseFloat(newValue);
});
( http://jsfiddle.net/XkPNv/1/ )
Dies war eine Verbesserung gegenüber der ersten Version, ist jedoch etwas ausführlicher. Beachten Sie, dass die parsedValue
Eigenschaft der Bereichsänderungen immer noch ein Problem aufweist (geben Sie etwas in die zweite Eingabe ein, wodurch sich die parsedValue
direkt ändert . Beachten Sie, dass die oberste Eingabe dies nicht tut aktualisieren). Dies kann durch eine Controller-Aktion oder durch das Laden von Daten von einem Datendienst geschehen.
Gibt es eine einfachere Möglichkeit, dieses Szenario mit AngularJS zu implementieren? Vermisse ich einige Funktionen in der Dokumentation?
quelle
ngModelCtrl
.)$scope
direkt geändert wird, wird das Modell auf ... gesetzt, bis der Benutzer mit dem Textfeld interagiert. Zu diesem Zeitpunkt können alle Parser den Modellwert beeinflussen. Zusätzlich zu einem Parser können Sie Ihrem Controller eine $ watch hinzufügen, um den Modellwert zu transformieren.