如何在 AngularJS 中正确设置 timepicker 指令的值？答案

【问题标题】：How do I properly set the value of my timepicker directive in AngularJS?如何在 AngularJS 中正确设置 timepicker 指令的值？
【发布时间】：2013-10-21 15:39:14
【问题描述】：

我正在尝试在 AngularJS 中创建一个使用 jquery timepicker 插件的 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 />

我还有什么需要做的吗？

【问题讨论】：

你用的是哪个时间选择器插件？
github.com/jonthornton/…

标签： angularjs

【解决方案1】：

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

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();
                     }
                  });
              });
         }
   }
});

希望对你有用。

【讨论】：