Question

我试图实现一个向<input type="date">字段添加格式化程序的简单指令。该指令如下：

myApp.directive("date-format", function (dateFilter) {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attributes, ngModelController) {
            ngModelController.$formatters.push(function (modelValue) {
                return modelValue && new Date(modelValue);
            });
        }
    };
});

在我将其名称更改为mb-date-format之前，它运作良好。我创建了一个JS小提琴：http://jsfiddle.net/HB7LU/4458/。它似乎适用于aaa，bbb，ccc等名称，但当您将名称更改为jjj，zzz时它会停止工作，......。

Answer 1

尝试将指令名称命名为“dateFormat”，例如：

myApp.directive("dateFormat", function (dateFilter)

然后在像这样的html中使用它

<input type="date" ng-model="date" date-format>

Answer 2

看着你的小提琴，我发现了一些可能是原因的问题：

您在输入中使用date类型。内置的浏览器日期选择器api非常难以覆盖，因此您的格式化解决方案将无法在许多浏览器中使用。

解决方案第一部分： 将输入类型更改为文本

<input type="text" ng-model="date" mb-date-format>

我理解这意味着您可能需要自己选择一个选择器，但如果您想要自定义，则需要这样做。如果你不介意依赖，并且你的要求不是太多，AngularUI makes a pretty extensible datepicker。

您的解析器函数永远不会被命中，无论如何您可能不需要解析器来进行格式化。

解决方案第二部分： 在格式化函数I modified your fiddle here中格式化输出，这也实现了初始查询中的指令名称。

带有ngModelController格式化程序的Angular指令

2 个答案: