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

AngularJS可以做的一件有趣的事情是将过滤器应用于特定的数据绑定表达式，这是一种方便的方法，例如，应用特定于区域性的货币或模型属性的日期格式。在作用域上有计算属性也很好。问题在于，这两个特性都不适用于双向数据绑定场景——只适用于从范围到视图的单向数据绑定。这似乎是一个在其他方面都很优秀的图书馆中明显的遗漏——还是我遗漏了什么

在中，我可以创建一个读/写计算属性，它允许我指定一对函数，一个函数被调用以获取属性值，另一个函数在设置属性时被调用。例如，这允许我实现文化感知输入——让用户键入“$1.24”并将其解析为ViewModel中的浮点，并在输入中反映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);
});

（）

当用户开始键入时，输入元素变得非常混乱。我通过将属性拆分为两个属性对其进行了改进，一个用于未解析的值，另一个用于已解析的值：

$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);
});

（）

与第一个版本相比，这是一个改进，但有点冗长，请注意，范围更改的

parsedValue

属性仍然存在问题（在第二个输入中键入一些内容，直接更改

parsedValue

。请注意，顶部输入不会更新）。这可能发生在控制器操作或从数据服务加载数据时

---

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

事实证明，有一个非常优雅的解决方案可以解决这个问题，但文档中没有很好的说明

可通过

|

操作符和角度

格式化程序处理显示的格式化模型值。事实证明，ngModel不仅有一个格式化程序列表，而且还有一个解析器列表

1.使用
ng model
创建双向数据绑定
3.在
link
方法中，将自定义转换器添加到
ngModel
控制器中
4.将新指令添加到已具有
ngModel


下面是一个将
输入中的文本转换为小写，并在模型中转换回大写的

模型控制器的API文档还简要说明和概述了其他可用的方法。
是否有任何理由使用“ngModel”作为链接函数中第四个参数的名称？这不只是指令的一个通用控制器，它基本上与ngModel属性无关吗？（这里还在学习angular，所以我可能完全错了。）由于“require:'ngModel'”，链接函数的第四个参数将是ngModel指令的控制器——即foo.bar的控制器，它是的一个实例。您可以随意命名第四个参数。（我将其命名为
ngModelCtrl
）此技术在中的“自定义验证”部分进行了说明。@Mark Rajcok在提供的提琴中，单击“加载数据”--全部小写，我希望模型值将全部大写，但模型值很小。你能帮我吗。解释为什么，以及如何使模型始终处于CAPS@rajkamal，因为loadData2（）直接修改
$scope
，所以模型将设置为。。。直到用户与文本框交互。此时，任何解析器都可以影响模型值。除了解析器之外，还可以向控制器添加$watch来转换模型值。
<input type="text" ng-model="foo.bar"></input>

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

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

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

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