jQuery Timepicker不会在AngularJS指令中更新模型

Question

[当我按任意键盘键时，例如0，并且如果我失去焦点，它会自动设置为00:00，但不会更新模型值。

angular.module('test').directive('timePicker', [function () {
return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
    model: '=ngModel'
  },
  link: function ($scope, element, attrs, ngModelCtrl) {

    element.timepicker({'timeFormat' : 'H:i'});

    ////element.on('change', function () {
    ////  scope.$apply(function () {
    ////    scope.model = element.datepicker('getTime');
    ////  });
    ////});


    ////$scope.$watch('model', function (newValues, oldValues, scope) {
    ////  console.log("Nothing here");
    ////});       
  }
}
}]);



<input id="startTime" type="text" name="startTime" data-ng-model="vm.data.StartTime" time-picker  />

由于模型未更新，我无法验证时间。评论的代码就是我试图更新的值。

关于如何解决此问题的任何想法？

Answer 1

之所以这样，是因为时间选择器更改了输入字段的值（可能使用$("input").val("newval")）不会触发任何角度的事件，以开始摘要循环。

自动地，我可以找到您可能想要使用的angular-jquery-timepicker。查看其源代码，似乎它正在侦听changeTime事件：

element.on('changeTime', function () {
  $scope.$apply(function () {
    $scope.model = element.val();
  });
});

changeTime事件也是documented（请参阅“事件示例”。）

在此Plunkr中尝试一下。事实证明，侦听change事件也有效。