咨询：页面Resize时自动关闭Popover的实现方法

嘿，我看你需要让页面尺寸调整时自动关闭这个用Angular UI Bootstrap做的Popover，这有几个实用的方案，你可以根据自己的项目情况选择：

方案一：控制器绑定状态+监听Resize事件 #

首先我们得给Popover加个状态绑定，这样就能手动控制它的显示和隐藏。修改你的HTML，加上popover-is-open属性：

<div id="deviceInputContainer">
  <div class="row noMarg">
    <div class="form col-xs-12" style='padding-left:0px;margin-right:15px;'>
      <div class="form col-xs-12 noPad left">
        <h2 class="page-title">Certification Projects
          <span class='icon-settings-big' 
                style='cursor:pointer;float:right;margin-top:-10px;' 
                title='settings' 
                uib-popover-template="dynamicPopoverPageSettings.templateUrl" 
                popover-placement="bottom-right" 
                popover-trigger="click outsideClick"
                popover-is-open="isSettingsPopoverOpen"> <!-- 新增状态绑定 -->
          </span>
        </h2>
      </div>
    </div>
  </div>
</div>

然后在对应的控制器里，监听窗口的Resize事件，一旦触发就把Popover的状态设为关闭：

angular.module('yourApp').controller('YourController', ['$scope', '$window', function($scope, $window) {
  // 初始化Popover的显示状态
  $scope.isSettingsPopoverOpen = false;

  // 处理Resize事件的函数
  const handleResize = () => {
    if ($scope.isSettingsPopoverOpen) {
      $scope.isSettingsPopoverOpen = false;
      // 因为Resize事件是在Angular上下文外触发的，需要手动触发消化循环
      if (!$scope.$$phase) {
        $scope.$apply();
      }
    }
  };

  // 给窗口绑定Resize监听
  angular.element($window).on('resize', handleResize);

  // 控制器销毁时记得移除监听，避免内存泄漏
  $scope.$on('$destroy', () => {
    angular.element($window).off('resize', handleResize);
  });
}]);

方案二：自定义指令复用逻辑 #

如果你的项目里有多个Popover都需要这个功能，那封装个自定义指令会更方便，不用重复写代码：

先写指令代码 #

angular.module('yourApp').directive('closePopoverOnResize', ['$window', '$timeout', function($window, $timeout) {
  return {
    restrict: 'A',
    require: '^uibPopover', // 依赖uibPopover的控制器
    link: function(scope, element, attrs, popoverCtrl) {
      let resizeTimeout;
      // 防抖处理Resize事件，避免频繁触发
      const handleResize = () => {
        if (resizeTimeout) {
          $timeout.cancel(resizeTimeout);
        }
        resizeTimeout = $timeout(() => {
          popoverCtrl.close(); // 直接调用Popover控制器的关闭方法
          if (!scope.$$phase) {
            scope.$apply();
          }
        }, 100); // 100ms的防抖延迟，可按需调整
      };

      angular.element($window).on('resize', handleResize);

      // 清理监听
      scope.$on('$destroy', () => {
        angular.element($window).off('resize', handleResize);
        if (resizeTimeout) {
          $timeout.cancel(resizeTimeout);
        }
      });
    }
  };
}]);

然后在HTML里用这个指令 #

只需要给Popover元素加个close-popover-on-resize属性就行：

<span class='icon-settings-big' 
      style='cursor:pointer;float:right;margin-top:-10px;' 
      title='settings' 
      uib-popover-template="dynamicPopoverPageSettings.templateUrl" 
      popover-placement="bottom-right" 
      popover-trigger="click outsideClick"
      close-popover-on-resize> <!-- 加上自定义指令 -->
</span>

小提示 #

• 一定要记得在控制器/指令销毁时移除Resize监听，不然会造成内存泄漏哦
• 加防抖处理是因为Resize事件会在调整窗口时频繁触发，防抖能减少不必要的关闭操作，提升性能

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