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

发生这种情况是因为 timepicker 更改输入字段的值（可能使用 $("input").val("newval")）不会触发 angular 正在侦听的任何事件以启动摘要循环。

我很自发地找到了您可能想要使用的angular-jquery-timepicker。查看它的源代码，它好像在监听一个changeTime 事件：

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

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

在Plunkr 中尝试一下。事实证明，监听change 事件也可以。