javascript - AngularJS - 为 View 创建自定义转换器

Question

我使用 AngularJS 1.5 并有一个对象，比方说:

myObject = {
  ts: 1497971053529, //time in ms
  field: { a: b } //some object
}

我希望用户观察并编辑 myObject的字段，但我想显示 ts作为日期(日， yyyy.mm.dd )，和 field应该是json格式的。类似这样的事情:

<input type="text" ng-model="myObject.ts"
    wtf-to-converter="longToDate" wtf-from-converter="dateToLong">
<input type="text" ng-model="myObject.field"
    wtf-to-converter="objectToJson" wtf-from-converter="jsonToObject">

结果:

2017.06.20
{"a":"b"}

那么如何实现这些转换器呢？如果我只需要观察这些值，我可以使用 AngularJS 管道:{{myObject.field | json }} ，但我也需要编辑它。

这可能是一个愚蠢的问题，但我是后端开发人员，还不习惯前端功能。感谢您的帮助!

Answer 1

您可以使用类似于下面示例的内容:它是一个使用格式化程序(模型 -> 用户)和解析器(用户 -> 模型)将文本转换为日期以及将日期转换为文本的指令。

(function (angular) {
    "use strict";

    angular.module("YourModule").directive("msDate", msDate);

    function msDate() {
        return {
            restrict: "A",
            require: "ngModel",
            link: link
        };

        function link(scope, element, attrs, ngModel) {
            // From the user to the model
            ngModel.$parsers.push(function (value) {
                return new Date(value).getTime();
            });
            // From the model to the user
            ngModel.$formatters.push(function (value) {
                return new Date(value);
            });
        }
    }
}(angular));

这并不是您问题的完整解决方案，但您会明白的；

用法类似于:

<input type="date" ng-model="yourModel" ms-date>