javascript - 如何在 AngularJS 中进行双向过滤？

Question

AngularJS 可以做的一件有趣的事情是将过滤器应用于特定的数据绑定(bind)表达式，这是一种方便的应用方式，例如，特定于文化的货币或模型属性的日期格式。在作用域上具有计算属性也很好。问题是这些功能都不适用于双向数据绑定(bind)场景——只能从范围到 View 进行单向数据绑定(bind)。这似乎是一个非常优秀的图书馆的明显遗漏 - 或者我错过了什么？

在KnockoutJS ，我可以创建一个读/写计算属性，它允许我指定一对函数，一个被调用以获取属性的值，另一个在设置属性时被调用。这使我能够实现，例如，文化感知输入——让用户键入“$1.24”并将其解析为 ViewModel 中的 float ，并在输入中反射(reflect) ViewModel 的变化。

我能找到的与此最接近的是使用 $scope.$watch(propertyName, functionOrNGExpression); 这允许我在 中的属性时调用一个函数$scope 变化。但这并没有解决，例如，文化感知输入问题。当我尝试在 $watch 方法本身中修改 $watched 属性时请注意问题:

$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。请注意顶部输入不会更新)。这可能发生在 Controller 操作或从数据服务加载数据时。

有没有更简单的方法来使用 AngularJS 实现这个场景？我是否遗漏了文档中的某些功能？

Answer 1

事实证明，对此有一个非常优雅的解决方案，但没有很好的记录。

用于显示的格式化模型值可以由 | 运算符和 Angular formatter 处理。事实证明，ngModel 不仅有一个格式化程序列表，还有一个解析器列表。

1。使用 ng-model 创建双向数据绑定(bind)

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

2。在您的 Angular 模块中创建一个指令，该指令将应用于同一元素并且取决于 ngModel Controller

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

3。在 link 方法中，将自定义转换器添加到 ngModel Controller

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>

这是一个 working example在 input 中将文本转换为小写并在模型中转换回大写

模型 Controller 的 API 文档也有一个简短的解释和其他可用方法的概述。