Angular JS ngModel：转换数据答案

【问题标题】：Angular JS ngModel: Transform dataAngular JS ngModel：转换数据
【发布时间】：2014-02-14 14:17:42
【问题描述】：

所以我们有一个模型，其中包含“时间”，格式为“14:00:00”。我们正在使用 angular-boostrap 的时间选择器，但它需要一个 JS 日期对象或一个 ISO 日期时间字符串。

我的第一个想法是做一个指令，将 $parser/$formatter 添加到 ngModel 控制器，在输入和输出的过程中将其转换为我们需要的格式。这非常适合输出，但不适用于输入。

我在这里做了一个小提琴http://jsfiddle.net/HB7LU/1820/

myApp.directive('timespan',function($filter){
    var dateFilter = $filter('date');
    function parser(data){
        return dateFilter(data,'HH:mm:ss');
    };

    function formatter(data){
        var converted = '2000-01-01T' + data + '-06:00';
        return converted;
    };

    return {
        require: 'ngModel',
        link:function(scope,element,attrs,ctrl){
            ctrl.$parsers.unshift(parser);
            ctrl.$formatters.unshift(formatter);
        }
    };
});

当您打开小提琴时，时间选择器不会反映 12:00:00。如果您查看控制台，它会抱怨 ngModel 格式错误。如果您使用选择器更改时间，您会看到 $scope.myModel.time 的格式正确。

如何在 ngModel 进入 timepicker 之前将其转换为正确的格式？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

angular-bootstrap 中的

timepicker 期望 $modelValue 是一个日期（它将它传递给 Date() 构造函数，然后从对象中解析小时和分钟）。由于它基于$modelValue 编写了自己的$render() 函数，因此您的格式化程序没有被使用。

如果不对 angular-bootstrap 代码进行一些手术，恐怕你不会得到你想要的东西。编写具有两个输入字段（小时和分钟）的控制器可能会更容易。

【讨论】：

格式化程序链不在渲染中，格式化程序链在 $watch (ngModelWatch) 中并且在每个摘要上运行。但是，您是正确的，时间选择器使用 modelValue 而不是 viewValue 是导致问题的原因。由于我们使用的是 0.8.0，因此我们只是对 angular-bootstrap 进行了修改以使用 viewValue，它现在可以按预期工作。谢谢

【解决方案2】：

一种可能的解决方案是为您的模型值输入创建指令。该指令将以与 timepicker 相同的格式接收日期 - 时间戳或 Date 对象并以您想要的任何方式显示它。

【讨论】：

【解决方案3】：

我认为 timepicker 必须在 render 方法中使用 $viewValue。因此，最好的解决方案是对 angular-bootstrap 代码进行这种手术。

将render function 中的$modelValue 更改为$viewValue。

【讨论】：