AngularJS - 创建自定义转换器视图

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>