如何实现Angular日期选择器在鼠标离开时关闭？

我来帮你搞定这个需求！要让日期选择器和视图里其他元素保持一致的ng-mouseleave关闭行为，我们可以分几步调整：

1. 先修正代码里的小语法问题 #

你原来的ng-class写法有个小错误，少了闭合的大括号，先调整成正确的格式：

<datepicker date-format="d MMMM, yyyy">
  <input 
    ng-class="{true: 'error-bron', false:'nonerror-bron'}[dateError===true]" 
    readonly="true" 
    class="bron-date" 
    ng-model="$root.date" 
    type="text" 
    placeholder="Pick a date"/>
</datepicker>

2. 给日期选择器绑定ng-mouseleave事件 #

直接给<datepicker>标签添加鼠标离开事件，触发和其他元素一致的关闭逻辑：

<datepicker date-format="d MMMM, yyyy" ng-mouseleave="closeCalendar()">
  <input 
    ng-class="{true: 'error-bron', false:'nonerror-bron'}[dateError===true]" 
    readonly="true" 
    class="bron-date" 
    ng-model="$root.date" 
    type="text" 
    placeholder="Pick a date"/>
</datepicker>

3. 在控制器中实现统一的关闭方法 #

在对应的控制器里，写一个和其他元素关闭逻辑完全一致的closeCalendar()方法。比如如果其他元素是通过控制某个显示状态变量来关闭，这里就复用同一个变量：

// 假设你其他元素的关闭逻辑是控制这个变量
$scope.calendarVisible = true;

$scope.closeCalendar = function() {
  // 和你ng-mouseleave事件里的关闭逻辑完全对齐
  $scope.calendarVisible = false;
  
  // 如果是第三方组件（比如ui-bootstrap的datepicker），可能需要调用组件内置的隐藏方法
  // 比如 $scope.$broadcast('uibDatepickerPopupClose');
};

4. 处理第三方组件的特殊情况 #

如果你用的是第三方日期选择器组件（比如ui-bootstrap），它的弹出日历面板可能是挂载在body上的，这时候直接给<datepicker>绑事件可能无效。这种情况下，你可以：

• 给弹出的日历面板添加自定义指令监听鼠标离开：

angular.module('yourApp').directive('closeOnMouseLeave', function() {
  return {
    link: function(scope, element) {
      element.on('mouseleave', function() {
        scope.$apply(function() {
          // 复用你的关闭逻辑
          scope.calendarVisible = false;
        });
      });
    }
  };
});

然后在组件的弹出面板模板上添加这个指令（如果是自定义组件），或者通过组件的配置项注入这个指令。

5. 可选：移除原有的点击外部关闭逻辑 #

如果只想保留ng-mouseleave的关闭方式，可以去掉日期选择器自带的点击外部关闭的配置（比如某些组件的click-outside指令、close-on-click-outside属性等）。

内容的提问来源于stack exchange，提问作者Petroskali