使用AngularJS指令格式化输入字段，同时保持范围变量不变

Question

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

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

我来了$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"), ''));
            });
        }
    };
});

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

有没有一种方法可以确保在不设置变量的情况下格式化文本字段？我猜我在寻找的是文本字段过滤器，但是我看不到任何内容。

最好的祝福

Answer 1

这是一个小提琴，显示了我如何在应用程序中实现完全相同的行为。最后我用ngModelController#render的不是$formatters，再加入一组独立的行为，关于触发keydown和change事件。

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