¿Cómo hacer un filtrado bidireccional en AngularJS?

Una de las cosas interesantes que AngularJS puede hacer es aplicar un filtro a una expresión de enlace de datos en particular, que es una forma conveniente de aplicar, por ejemplo, el formato de fecha o moneda específico de la cultura de las propiedades de un modelo. También es bueno tener propiedades calculadas en el ámbito. El problema es que ninguna de estas características funciona con escenarios de enlace de datos bidireccionales, solo enlace de datos unidireccional desde el alcance hasta la vista. Esto parece ser una omisión flagrante en una biblioteca de otra manera excelente, ¿o me estoy perdiendo algo?

En KnockoutJS , pude crear una propiedad calculada de lectura / escritura, que me permitió especificar un par de funciones, una que se llama para obtener el valor de la propiedad y otra que se llama cuando se establece la propiedad. Esto me permitió implementar, por ejemplo, una entrada consciente de la cultura, lo que permitió al usuario escribir "$ 1.24" y analizarla en un flotante en ViewModel, y tener cambios en ViewModel reflejados en la entrada.

Lo más parecido que puedo encontrar similar a esto es el uso de $scope.$watch(propertyName, functionOrNGExpression);Esto me permite tener una función invocada cuando una propiedad en los $scopecambios. Pero esto no resuelve, por ejemplo, el problema de entrada consciente de la cultura. Observe los problemas cuando intento modificar la $watchedpropiedad dentro del $watchpropio método:

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

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

El elemento de entrada se confunde mucho cuando el usuario comienza a escribir. Lo mejoré dividiendo la propiedad en dos propiedades, una para el valor no analizado y otra para el valor analizado:

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

Esto fue una mejora con respecto a la primera versión, pero es un poco más detallado, y observe que todavía hay un problema con la parsedValuepropiedad de los cambios de alcance (escriba algo en la segunda entrada, que cambia la entrada parsedValuedirectamente. Observe que la entrada superior no actualizar). Esto puede suceder por una acción del controlador o por cargar datos de un servicio de datos.

¿Hay alguna manera más fácil de implementar este escenario usando AngularJS? ¿Me falta alguna funcionalidad en la documentación?

Resulta que hay una solución muy elegante para esto, pero no está bien documentado.

Los valores de modelo de formato para visualización pueden ser manejados por el |operador y un angular formatter. Resulta que el ngModel que no solo tiene una lista de formateadores sino también una lista de analizadores.

1. Use ng-modelpara crear el enlace de datos bidireccional

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

2. Cree una directiva en su módulo angular que se aplicará al mismo elemento y que depende del ngModelcontrolador

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

3. Dentro del linkmétodo, agregue sus convertidores personalizados al ngModelcontrolador

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

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

4. Agregue su nueva directiva al mismo elemento que ya tiene ngModel

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

Aquí hay un ejemplo de trabajo que transforma el texto en minúsculas en inputy de nuevo en mayúsculas en el modelo

La documentación API para el controlador modelo también tiene una breve explicación y una descripción general de los otros métodos disponibles.