Question

我正在为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();
  });
}

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

Answer 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等已经在您的datepicker元素之外而且find()无法正常工作，因此您的事件处理程序无法正常工作。

Answer 2

试试这个

DirectoryOld2

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

2 个答案: