使用ngModelController的自定义指令不更新UI值

时间:2015-06-17 09:43:54

标签: angularjs angularjs-directive

我正在尝试创建一个将十进制值格式化为时间值h:mm的指令。如果用户输入时间值,则应使用十进制表示更新模型。如果用户输入小数值,则应将其输入替换为格式化值。

我使用的指令如下:

<input type="text" hour-input ng-model="vm.hours"/>

以下是相关代码:

app.directive('hourInput', hourInput);

function hourInput() {
  var directive = {
    link: link,
    restrict: 'A',
    require: 'ngModel'
  };

  return directive;

  function link(scope, element, attrs, ngModelController) {
    // model -> view
    ngModelController.$formatters.push(function (value) {
      return formatTime(value);
    });

    // view -> model
    ngModelController.$parsers.push(function (value) {
      var result;
      if (!/^\d?[\d,\.]*$/.test(value)) {
        result = parseTime(value);
      } else {
        result = parseFloat(value);
      }
      return result;
    });
  }
}

function parseTime(value) {
  // code removed for brevity
  return hours + minutes / 60;
}

function formatTime(value) {
  // code removed for brevity
  return result;
}

这是plunker。与模型的交互正在发挥作用。但是,在UI中不会更新格式化的时间。

1 个答案:

答案 0 :(得分:1)

每次按键时,

ngModelController.$parsers都会解析您的价值。由于您不知道用户何时准备输入值,因此无法在每次更新时真正解析该值。 假设你想允许值

  • 5
  • 5
  • 5.5
  • 5:30

解析器不是您想要的方式。 我认为当您在模糊或更改事件上附加函数时,您将获得所需的行为。

这样的东西
element.bind('blur', function () {
      element.val(formatTime(element.val()));
    });