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

这有点奏效，但是我的问题是：使用这种方法，格式化程序仅在数据模型最初绑定时（或者当其值在代码中更改时）运行，而在将模型从用户输入。我希望格式化程序在用户更改输入后运行（并且输入已由解析器解释并应用于模型）。有办法吗？

编辑：一个实际的例子，以防被调查者不清楚：

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

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

Answer 1

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

#include<stdio.h>
#include<stdlib.h>

int main(int argc, char **argv) {
        const char * const days[] = {
                "Sunday",
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday"
        };
        int x = argc > 1 ? strtol(argv[1], NULL, 0) : 1;
        if( x < 1 || x > 7 ) {
                fprintf( stderr, "Invalid input: %d.  Must be Integer in [1,7]", x);
                exit(EXIT_FAILURE);
        }
        puts(days[x-1]);
        return EXIT_SUCCESS;
}

Answer 2

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

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

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

2 个答案: