我在格式化输入字段时遇到问题，而基础范围变量未格式化。

我想要实现的是一个显示货币的文本字段。它应该在处理错误输入时即时格式化自己。我得到了这个工作，但我的问题是我想将非格式化值存储在我的范围变量中。输入的问题在于它需要一个双向的模型，因此更改输入字段会更新模型，反之亦然。

我遇到了 $parsers 和 $formatters 这似乎是我正在寻找的东西。不幸的是，它们并没有相互影响(这实际上可能有助于避免无限循环)。

我创建了一个简单的jsFiddle:http://jsfiddle.net/cruckie/yE8Yj/，代码如下:

HTML:

<div data-ng-app="app" data-ng-controller="Ctrl">
    <input type="text" data-currency="" data-ng-model="data" />
    <div>Model: {{data}}</div>
</div>

JS:

var app = angular.module("app", []);

function Ctrl($scope) {
    $scope.data = 1234567;
}

app.directive('currency', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {

            ctrl.$formatters.push(function(modelValue) {
                return modelValue.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
            });

            ctrl.$parsers.push(function(viewValue) {
                return parseFloat(viewValue.replace(new RegExp(",", "g"), ''));
            });
        }
    };
});

同样，这只是一个简单的例子。当它加载时，一切看起来都像它应该的那样。输入字段已格式化，变量未格式化。但是，当更改输入字段中的值时，它不再格式化自身 - 但是变量会正确更新。

有没有办法确保文本字段被格式化而变量不是？我想我正在寻找的是文本字段的过滤器，但我看不到任何东西。

最好的问候

最佳答案

这是一个 fiddle ，展示了我如何在我的应用程序中实现完全相同的行为。我最终使用了 ngModelController#render 而不是 $formatters，然后添加了一组单独的在 keydown 和 change 上触发的行为 事件。

http://jsfiddle.net/KPeBD/2/

https://stackoverflow.com/questions/19094150/