Question

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

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

这是显示的内容： enter image description here 这就是我想要的：

这是我的指示：

   '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 />

我还需要做些什么吗？

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

我希望你觉得有用。

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

1 个答案: