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

我试图在AngularJS中创建一个使用jquery timepicker插件的timepicker指令。（我无法让任何现有的角度计时器在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()));
                });
            });
        },
    };
})

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

注释的代码是我尝试的，但它不起作用。我得到一个错误，读取，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 />

---

我还有别的事要做吗

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

使用以下指令，它可以正常工作：

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

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

---

我希望您能找到有用的工具。

您使用的是哪种计时器插件？