Як зробити двосторонню фільтрацію в 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? Чи не вистачає я певної функціональності в документації?

Виявляється, є дуже елегантне рішення цього, але воно недостатньо задокументоване.

Значення моделювання форматування для відображення можуть оброблятися |оператором і кутовим formatter. Виявляється, що ngModel має не лише список форматів, а й список парсерів.

1. Використовуйте ng-modelдля створення двостороннього прив'язки даних

<input type="text" ng-model="foo.bar"></input>

2. Створіть у своєму кутовому модулі директиву, яка буде застосована до того ж елемента, що залежить від ngModelконтролера

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

3. У межах linkметоду додайте власні перетворювачі до ngModelконтролера

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

4. Додайте нову директиву до того ж елемента, який вже має ngModel

<input type="text" lowercase ng-model="foo.bar"></input>

Ось робочий приклад, який перетворює текст у малі регістри inputта назад у великі регістри моделі

Документація API для контролера Модель також має короткий опис і огляд інших доступних методів.