0

我在这里做了一个简单的 plunkr http://plnkr.co/edit/zNb65ErYH5HXgAQPOSM0?p=preview

我创建了一个小日期选择器我希望它在你关注它时自行关闭（datepicker 的焦点输出）如果我在输入上设置模糊我无法使用日期选择器，如果我在 datepicker 上放置 focusout 事件它不起作用

我也试过：

angular.element(theCalendar).bind('blur', function () {
    $scope.hideCalendar();
});

但它不起作用。

有什么线索吗？

4

3 回答 3

1

这是因为您在有机会做任何事情之前就删除了该项目，这是一个工作示例：

http://plnkr.co/edit/mDfV9NLAQCP4l7wHdlfi?p=preview

只需添加一个超时：

thisInput.bind('blur', function () {
  $timeout(function(){
    $scope.hideCalendar();
  }, 200);
});

您是否考虑过使用现有的日期选择器？像 angularUI 或 angular-strap：http ://mgcrea.github.io/angular-strap/##datepickers

更新：

不是一个完整的解决方案，但应该让你更接近：

    angular.element($document[0].body).bind('click', function(e){
      console.log(angular.element(e.target), e.target.nodeName)
      var classNamed =  angular.element(e.target).attr('class');
      var inThing = (classNamed.indexOf('datepicker-calendar') > -1);
      if (inThing || e.target.nodeName === "INPUT") {
        console.log('in');
      } else {
        console.log('out');
          $timeout(function(){
            $scope.hideCalendar();
          }, 200);
      }
    });

http://plnkr.co/edit/EbQl5xsCnG837rAEhBZh?p=preview

然后你要做的是监听页面上的点击，如果点击在日历之外，则关闭它，否则什么也不做。以上仅考虑到您正在单击具有包含 datepicker-calendar 的类名的内容，您需要对其进行调整，以便在日历中单击也不会关闭它。

于 2014-09-10T15:51:23.517 回答
1

关闭mouseout怎么样？

如果您移动到日历中的另一个 div，则需要取消关闭：

    //get the calendar as element
    theCalendar = element[0].children[1];

    // hide the calendar on mouseout
    var closeCalendarTimeout = null;
    angular.element(theCalendar).bind('mouseout', function () {
      if ( closeCalendarTimeout !== null )
        $timeout.cancel(closeCalendarTimeout);
      closeCalendarTimeout = $timeout(function () {
        $scope.hideCalendar();
      },250)
    });
    angular.element(theCalendar).bind('mouseover', function () {
      if ( closeCalendarTimeout === null ) return
      $timeout.cancel(closeCalendarTimeout);
      closeCalendarTimeout = null;
    });

编辑

将 tabindex 属性添加到 div 会导致它触发焦点和模糊事件。

, htmlTemplate = '<div class="datepicker-calendar" tabindex="0">' +

angular.element(theCalendar).bind('blur', function () {
  $scope.hideCalendar();
});
于 2014-09-10T17:34:48.457 回答
0

所以，我知道这可能不是最佳实践或最佳方法，但最后我修复并得到了我需要的东西：

thisInput.bind('focus click', function bindingFunction() {

          isMouseOnInput = true;
          $scope.showCalendar();
          angular.element(theCalendar).triggerHandler('focus');
        });
        thisInput.bind('blur focusout', function bindingFunction() {

          isMouseOnInput = false;
        });

        angular.element(theCalendar).bind('mouseenter', function () {

          isMouseOn = true;
        });

        angular.element(theCalendar).bind('mouseleave', function () {

          isMouseOn = false;
        });

        angular.element($window).bind('click', function () {

          if (!isMouseOn && !isMouseOnInput) {

            $scope.hideCalendar();
          }
        });

我设置了一些布尔变量来检查单击页面时鼠标的位置，如果您有更好的解决方案，它就像一个魅力，请告诉我，但这实际上解决了所有问题。

我接受这个作为答案，但我感谢这个页面上的所有人！

于 2014-09-10T19:58:38.977 回答