在angularjs指令中将时间戳转换为日期

我是个新手，对指令没有太多想法。我需要创建一个指令，它将时间戳作为输入，并以小时：分钟：秒的格式（下拉）显示相同的内容。如果有人从屏幕上更改小时、分钟或秒的值，则时间戳也应更改。我可以转换时间戳并将其显示为小时、分钟和秒，但当用户从屏幕上更改值时，我无法恢复时间戳。

您可以使用日期过滤器实现这一点：

<input type="text" ng-model="dateInput">
{{dateInput | date : 'hh:mm:ss'}}

{{dateInput}date:'hh:mm:ss'}

---

dateInput模型没有改变，仍然是用户输入的纯时间戳。您可以使用日期过滤器非常轻松地将数据显示为日期。（您可以以同样的方式将其附加到下拉列表）

您可以在指令中使用ng模型的概念。我不确定您是如何将时间戳传递给模型的，但是如果您使用ng模型，那么您可以在ng模型控制器中推送一个自定义$formatter，将时间戳转换为小时、分钟和秒（使用适合您域的任何逻辑），然后在视图中呈现相同的时间戳。要将日期转换回时间戳，需要推送一个$parser，它将把日期时间转换成时间戳。但是，您将在viewValue上放置$watch，以便在用户从屏幕更改值时触发解析器。我为你创造了一个小提琴手

指令

myApp.directive("timeDir", function() {
  return {
    restrict: "A/E",
    template: "Min - <input type='text' ng-model='time.min'></input><br/>Sec - <input type='text' ng-model='time.sec'></input>",
    require: "ngModel",
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.push(function(modelValue) {
        var mins = parseInt(modelValue / 60);
        var secs = modelValue % 60;
        return {
          min: mins,
          sec: secs
        }
      });

      ngModelCtrl.$render = function() {
        scope.time = ngModelCtrl.$viewValue;
      }

      ngModelCtrl.$parsers.push(function(viewValue) {
        var totalSec = parseInt(parseInt(viewValue.min * 60) + parseInt(viewValue.sec));
        return totalSec;
      });

      scope.$watch('time', function() {
        ngModelCtrl.$setViewValue(scope.time);
      }, true);
    }
  }
});

myApp.directive（“timeDir”，function（））{
返回{
限制：“A/E”，
模板：“最小-
秒-”，
要求：“ngModel”，
链接：函数（范围、元素、属性、ngModelCtrl）{
ngModelCtrl.$formatters.push（函数（modelValue）{
var mins=parseInt（modelValue/60）；
var secs=模型值%60；
返回{
敏：敏，
秒：秒
}
});
ngModelCtrl.$render=function（）{
scope.time=ngModelCtrl.$viewValue；
}
ngModelCtrl.$parsers.push（函数（viewValue）{
var totalSec=parseInt（parseInt（viewValue.min*60）+parseInt（viewValue.sec））；
返回totalSec；
});
作用域：$watch（'时间'），function（）{
ngModelCtrl.$setViewValue（scope.time）；
}，对）；
}
}
});

---

请注意，我已将时间戳转换为min:second only。

您能否尝试提供一个fiddler或plunkr来显示您迄今为止的尝试？好的，我将尝试创建plunkr欢迎使用堆栈溢出。请查看有关如何充分利用您的问题的更多信息。正如Pratik所建议的，最好提供您的代码和您收到的任何特定错误消息，以方便读者回答您的问题。另外，你也可以写下你的答案并贴出你所遇到的情况。谢谢你的回答。实际上，问题是我从API接收的时间戳是一个自定义生成的时间戳。所以我有一个不同的逻辑将时间戳转换为日期。你知道怎么做吗？只要做你自己的过滤器，医生的教程：好的，我会尝试使用它。@KobiCohen:-）。实际上，我也遇到过类似的情况，但情况要复杂得多，我发现在指令中使用ng模型非常有帮助。你的答案要简单得多，简洁得多。投票支持该解决方案。