jQuery UI datePicker 的 AngularJS 指令在滚动时不会隐藏日历答案

【问题标题】：AngularJS directive for jQuery UI datePicker does not hide calendar when scrollingjQuery UI datePicker 的 AngularJS 指令在滚动时不会隐藏日历
【发布时间】：2016-03-09 19:20:07
【问题描述】：

我正在为 jQuery UI datepicker 编写一个 AngularJS 指令。我想在滚动时隐藏下拉日历，但现在我无法隐藏它。你可以访问我的 plunker 来查看它。 https://plnkr.co/edit/CuJB1vsKuaqfkh8NFUXb?p=preview

我的指令如下：

module.directive('myDatePicker', ['$window', '$timeout',
  function($window, $timeout) {
    return {
      restrict: 'A',
      require: "ngModel",
      link: linkFunc
    };
  }
]);

function linkFunc(scope, element, attr, ngModelCtrl) {
  var updateModel = function(dateText) {
    scope.$apply(function() {
      ngModelCtrl.$setViewValue(dateText);

    });
  };
  var options = {
    onSelect: function(dateText) {
      updateModel(dateText);
    },
    hideOnInputClick: true,
    maxDate: "+0d",
    selectOtherMonths: true
  };
  element.datepicker(options);
  var body = element.find('body');

  body.bind('scroll', function() {
    element.find('#ui-datepicker-div').hide();
    scope.apply();
  });
}

有谁知道为什么会发生这种情况以及如何隐藏日历？

【问题讨论】：

标签： jquery angularjs jquery-ui angularjs-directive jquery-ui-datepicker

【解决方案1】：

你的代码应该是：

element.parent().parent().on('scroll', function() {
   element.datepicker('hide'),
   scope.$apply();
 // --^ bad idea, this will trigger a lot while scrolling. debounce the handler
});

查看更新的plunk。

您的原始代码不起作用，因为滚动发生在<div>，而不是<body>。即使正文正在滚动，您的事件处理程序也无法工作，因为body、#ui-datepicker-div 等在您的日期选择器元素之外，find() 将无法工作。

【讨论】：

用于去抖动。使用 $timeout() 应该可以正常工作吗？

【解决方案2】：

试试这个

$( window ).scroll(function() {
  // do what ever you want
});

【讨论】：

没有。我尝试了 element.datepicker('hide'), $('#ui-datepicker-div').hide();不工作。需要确切的方法来隐藏下拉日历