javascript - Angular UI TimePicker 无法正常工作

Question

我正在创建一个 Angular Directive(指令)来处理一些日期时间功能。我正在尝试使用 Angular 的 UI Bootstrap，但在 TimePicker 部分中遇到了一个奇怪的错误。它将显示我的开始时间(默认为当前时间)，但如果我尝试单击向上/向下箭头来更改时间，它会在两个字段中显示 NaN，并且当我检查日期时，它会说这是无效日期。以下是我的代码:

utilisyncApp.directive("questionDateTime", [
    "$log",
    function ($log) {
        return {
            restrict: "E",
            templateUrl: "/app/directives/utilisyncItem/utilisyncQuestion/questionDateTime/questionDateTime.html",
            scope: {
                item: '='
            },
            link: function ($scope, $element, $attrs) {
                $scope.mStep = 1;
                $scope.hStep = 1;
                $scope.dateFormat = 'dd-MMM-yyyy'
                $scope.popup = { isOpen: false };
                $scope.dateTime = { time: new Date() };

                $scope.openDate = openDate;
                $scope.changed = changed;


                init();

                function init() {
                    if ($scope.item.question.defaultToCurrent) {
                        $scope.dateTime.date = new Date();
                    }
                }

                function openDate() {
                    $scope.popup.isOpen = true;
                }

                function changed() {
                    var date = $scope.dateTime.date;
                    var time = $scope.dateTime.time;
                    if ($scope.item.question.includeTime) {
                        $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), time.getHours(), time.getMinutes(), 0);
                    }
                    else {
                        $scope.item.value = new Date(date.getFullYear(), date.getMonth(), date.getDay(), 0, 0, 0);
                    }
                }
            }
        };
    }
]);

<div class="form-group">
    <p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="dateTime.date" ng-change="changed()" is-open="popup.isOpen" datepicker-options="dateOptions" close-text="Close" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="openDate()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
    <uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="true"></uib-timepicker>
</div>

看起来我使用它的方式几乎与他们网站上的示例一模一样，但它无法正常工作，我不确定为什么。

Answer 1

此行有一个拼写错误:

<uib-timepicker ng-if="item.question.includeTime" ng-model="dateTime.date" readonly-input="true" ng-change="changed()" hour-step="hStep" minute-step="mStep" show-meridian="true"></uib-timepicker>

如你所写

hour-step="hstep" minute-step="mstep"

而不是

hour-step="hStep" minute-step="mStep"