这个 Timepicker 指令在 Firefox 中寻找什么？答案

【问题标题】：What is this Timepicker directive looking for in Firefox?这个 Timepicker 指令在 Firefox 中寻找什么？
【发布时间】：2015-01-28 14:03:38
【问题描述】：

我正在尝试在 angular.js webapp 中使用 timepicker 指令。它在 Chrome 中没有任何问题，但在 Firefox 中我收到以下错误：

"Timepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date."

这个指令会在 Firefox 中寻找它在 Chrome 中没有的什么？

编辑：在我的 html 中执行以下操作后，我仍然遇到相同的错误：

<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>

这在我的控制器中：

$scope.mytime = new Date();

$scope.hstep = 1;
$scope.mstep = 15;

$scope.ismeridian = true;
$scope.toggleMode = function() {
    $scope.ismeridian = ! $scope.ismeridian;
};

$scope.update = function() {
    var d = new Date();
    d.setHours( 14 );
    d.setMinutes( 0 );
    $scope.mytime = d;
};

$scope.changed = function () {
    $log.log('Time changed to: ' + $scope.mytime);
};

但我仍然遇到同样的错误。我也在 Firefox 35 中。 Chrome 可以完美地使用此代码。

【问题讨论】：

标签： angularjs google-chrome firefox angularjs-directive timepicker

【解决方案1】：

您能否指定您正在使用的 timepicker 指令，以及一些显示您如何使用它的代码？如果这是来自 angular-ui 的，您是否将 ng-model 设置为新的 Date() 对象？

我已经在 Chrome（最新）、Firefox 35.0.1 和 IE 10.0 中对此进行了测试，并且在所有这些版本中都适用。

http://plnkr.co/edit/O4UUzfHLlyRkEL9SFX8m?p=preview

html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
    <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
  </body>

</html>

javascript：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $log) {
  $scope.mytime = new Date();

  $scope.hstep = 1;
  $scope.mstep = 15;

  $scope.ismeridian = true;
  $scope.toggleMode = function() {
      $scope.ismeridian = ! $scope.ismeridian;
  };

  $scope.update = function() {
      var d = new Date();
      d.setHours( 14 );
      d.setMinutes( 0 );
      $scope.mytime = d;
  };

  $scope.changed = function () {
      $log.log('Time changed to: ' + $scope.mytime);
  };

});

【讨论】：

当然。这是我正在使用的时间选择器：angular-ui.github.io/bootstrap/#/timepicker。我这样使用它： '' 由 '

' '
在您的模型上，是否像 $scope.time = new Date(); 一样初始化了 $scope.time ?
是的，我正在初始化它：$scope.EndTime = new Date();这在 Chrome 中可以正常工作，但在 Firefox 中则不行。
您使用的是什么版本的 Firefox、Angular 和 ui-bootstrap？
我更新了答案以提供 plnkr，并在我的机器上在 IE、Chrome 和 Firefox 中进行了测试，但没有收到错误。我的示例适用于您的 Firefox 吗？