1

我正在尝试在使用 jquery timepicker 插件的 AngularJS 中创建一个 timepicker 指令。（我无法让任何现有的 Angular TimePickers 在 IE8 中工作）。

到目前为止，我能够让指令在选择时间时更新范围。但是，我现在需要完成的是获取输入以显示时间，而不是页面首次加载时模型值的文本。见下文：

这就是显示：在此处输入图像描述 这就是我想要的：在此处输入图像描述

这是我的指令：

   'use strict';

    playgroundApp.directive('timePicker', function () {
        return {
            restrict: 'A',
            require: "?ngModel",
            link: function(scope, element, attrs, controller) {
                element.timepicker();
            //controller.$setViewValue(element.timepicker('setTime', ngModel.$modelValue));
            //ngModel.$render = function() {
            //    var date = ngModel.$modelValue ? new Date(ngModel.$modelValue) : null;
            //};

            //if (date) {
            //    controller.$setViewValue(element.timepicker('setTime', date));
            //}

            element.on('change', function() {
                scope.$apply(function() {
                    controller.$setViewValue(element.timepicker('getTime', new Date()));
                });
            });
        },
    };
})

注释代码是我尝试过的，但它不起作用。我收到一条错误消息，显示 ngModel 未定义。因此，澄清一下，当页面首次加载时，如果该输入字段有模型，我希望输入仅显示时间，就像选择值后一样。

谢谢。

编辑：

好的，经过反复试验后，我的链接功能如下所示：

    link: function (scope, element, attrs, controller) {
        if (!controller) {
            return;
        }

        element.timepicker();

        var val = controller.$modelValue;

        var date = controller.$modelValue ? new Date(controller.$modelValue) : null;

        controller.$setViewValue(element.timepicker('setTime', controller.$modelValue));
        //ngModel.$render = function () {
        //    var date = ngModel.$modelValue ? new Date(ngModel.$modelValue) : null;
        //};

        if (date) {
            controller.$setViewValue(element.timepicker('setTime', date));
        }

        element.on('change', function() {
            scope.$apply(function() {
                controller.$setViewValue(element.timepicker('getTime', new Date()));
            });
        });
    },

这不会给我任何错误，但 $modelValue 始终为 NaN。这是我的控制器代码：

   $scope.startTime = new Date();
$scope.endTime = new Date();

和相关的html：

    <input id="startTime" ng-model="startTime" time-picker/>
    <input id="endTime" ng-model="endTime" time-picker />

还有什么我需要做的吗？

4

1 回答 1

3

我花了几天时间尝试使用相同的插件但没有得到结果，最终我找到了另一个：

http://trentrichardson.com/examples/timepicker/

使用以下指令可以完美运行：

app.directive('timepicker', function() {
   return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
              $(function(){
                  element.timepicker({
                     onSelect:function (time) {
                         ngModelCtrl.$setViewValue(time);
                         scope.$apply();
                     }
                  });
              });
         }
   }
});

我希望你觉得有用。

于 2013-11-13T12:42:45.817 回答