AngularJS: 解析器执行后重新应用格式化程序

Question

我在应用到文本输入的 AngularJS 应用程序中编写了一个自定义指令。该指令定义了一个 parser 来将用户输入转换为数字。同时，该指令还定义了一个 formatter 来解释来自模型的数字并将其转换回文本输入以供显示。它看起来像这样：

qvangular.directive('mydirective', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(function(v) {
                return convertToNumber(v);
            });
            ngModelCtrl.$formatters.unshift(function(v) {
                return formatNumber(v);
            });
        }
    };
});

它有点管用，但我遇到的问题是：使用这种方法，格式化程序仅在数据模型最初绑定时（或当它的值在代码中发生变化时）运行s，但它不会运行当模型从用户输入更改时。我希望格式化程序在用户更改输入后运行（并且输入已被解析器解释并应用于模型）。有办法吗？

编辑：一个实际的例子，以防问题不清楚：

用户在文本框中键入“1K”
当文本框失去焦点时，解析器函数运行s 并调用 convertToNumber("1K")，它将字符串转换为数字 1000 和 returns it
值1000应用于模型
现在我希望格式化程序函数为运行，这样它就可以读取值1000并将其转换为我想要显示的内容，例如 "1,000.00"

缺少第 4 步，我不知道如何将 AngularJS 强制为 "re-evaluate the model"，从而重新应用格式化程序。

Answer 1

一个常见的解决方案是绑定 blur 事件并在那里格式化值：

element.bind('blur', () => {
     let value = element.val();
     let formatted = formatNumber(value);    
     element.val(formatted);
});

Answer 2

在我的输入掩码中，我实际上在解析器中重新渲染了模型的视图值：

ngModelCtrl.$parsers.unshift(function(v) {
  ngModelCtrl.$setViewValue(formatNumber(v));
  ngModelCtrl.$render();
  return convertToNumber(v);
});

AngularJS: 解析器执行后重新应用格式化程序

AngularJS: re-apply formatter after parser has executed

javascript

angularjs

angularjs-directive