javascript - AngularJs - 修改输入格式的指令

Question

我想做以下事情:

我的 Controller 模型中有一个日期对象，我想让用户修改它。应该为用户提供两个输入字段。第一个输入字段应修改日期，另一个输入字段应修改时间。两个输入字段应该在相同的日期模型上工作。

<input ng-model="model.date" date-format="YYYY-MM-DD">
<input ng-model="model.date" date-format="HH:mm:SS">

我没有找到关于此绑定(bind)的文献。通常 ng-model 指令会处理输入字段的值。现在我想用我自己的格式覆盖这个值。此外，如果用户更改输入，则应解析更改并将其放回日期对象。

由于 vanilla js 中的日期操作有点奇怪，我使用 moment.js 来格式化和解析日期和字符串。

我目前的做法是这样的:

app.directive('dateFormat', function() {
    return {
        restrict: 'A',
        link: function(scope, el, at) {
            var format = at.dateFormat;
            scope.$watch(at.ngModel, function(date) {
                var result = moment(date).format(format);
                el.val(result);
            });
        }
    };
});

但是，一旦我想更改浏览器中的输入值，这就会中断。我得到一些 NaN:NaN...

我的问题是:

• 我该如何建模？
• 这种方法是否适用于 Angular 哲学，还是我在这里做了一些奇怪的事情？
• 我可以同时使用 ng-model 和我的日期格式指令吗？
• 有更简单的方法吗？

Answer 1

过滤器就是您要找的东西:

//In your controller
$scope.modelDate = $filter('date')(dateToFormat, "YYYY-MM-DD");

//In your view
<input ng-model="modelDate" type="text">

话虽这么说，您尝试做的并不太“离谱”，因为每当用户写入输入时，格式都会中断。您需要使用 ngModel，它有一种特殊的方式来处理指令(一种 API)，并且可以在链接过程中作为第四个参数直接浏览。

所以对于你的代码，它应该是这样的:

return {
  require: 'ngModel',
  link: function(scope, element, attrs, ngModelController) {
    ngModelController.$parsers.push(function(data) {
      //View -> Model
      return data;
    });
    ngModelController.$formatters.push(function(data) {
      //Model -> View
      return $filter('date')(data, "YYYY-MM-DD");
    });
  }
}

更多信息 here