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

问题描述 投票:0回答:1

我已经在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“重新评估模型”并因此重新应用格式器。

javascript angularjs angularjs-directive
1个回答
0
投票

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

element.bind('blur', () => {
     let value = element.val();
     let formatted = formatNumber(value);    
     element.val(formatted);
});
© www.soinside.com 2019 - 2024. All rights reserved.