时间戳

首页 > 解决方案 > AngularJS：解析器执行后重新应用格式化程序

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

问题描述

我在 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);
            });
        }
    };
});

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

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

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

第 4 步是缺少的，我不知道如何强制 AngularJS “重新评估模型”，从而重新应用格式化程序。

标签： javascriptangularjsangularjs-directive

解决方案

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

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

推荐阅读