Как сделать двустороннюю фильтрацию в AngularJS?

Одна из интересных вещей, которые может сделать AngularJS, - это применить фильтр к конкретному выражению привязки данных, что является удобным способом применить, например, специфическую для культуры валюту или форматирование даты свойств модели. Также хорошо иметь вычисленные свойства в области видимости. Проблема заключается в том, что ни одна из этих функций не работает с двусторонними сценариями привязки данных - только односторонняя привязка данных из области действия к представлению. Кажется, это явное упущение в отличной библиотеке - или я что-то упустил?

ВKnockoutJSЯ мог бы создать вычисляемое свойство для чтения / записи, которое позволило бы мне указать пару функций, одну из которых вызывали для получения значения свойства, а другую вызывали при установке свойства. Это позволило мне реализовать, например, ввод с учетом культуры, предоставив пользователю тип «$ 1,24». и синтаксический анализ в плавающей точке во ViewModel, и изменения во ViewModel отражены во входных данных.

Самое близкое, что я мог найти подобное, это использование$scope.$watch(propertyName, functionOrNGExpression); Это позволяет мне вызывать функцию, когда свойство в$scope изменения. Но это не решает, например, культурную проблему ввода. Обратите внимание на проблемы, когда я пытаюсь изменить$watched собственность в пределах$watch сам метод:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/gyZH8/2/)

Элемент ввода становится очень запутанным, когда пользователь начинает печатать. Я улучшил его, разделив свойство на два свойства, одно для непарсированного значения и одно для анализируемого значения:

$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/)

Это было улучшение по сравнению с первой версией, но немного более многословно, и обратите внимание, что проблема все еще остаетсяparsedValue свойство области видимости изменяется (введите что-то во второй вход, который изменяетparsedValue непосредственно. обратите внимание, верхний вход не обновляется). Это может произойти из-за действия контроллера или из-за загрузки данных из службы данных.

Есть ли какой-нибудь более простой способ реализовать этот сценарий с помощью AngularJS? Мне не хватает некоторых функций в документации?

Ответы на вопрос(1)

Ваш ответ на вопрос