如何在窗口调整大小时关闭Angular Bootstrap Popover？

要实现页面调整大小时自动关闭Popover，我们可以通过绑定Popover显示状态变量 + 监听窗口resize事件来完成，具体步骤如下：

1. 修改HTML：绑定Popover的显示状态 #

首先给你的Popover元素新增popover-is-open属性，用一个变量来控制它的显示/隐藏状态：

<div class="form col-xs-12 noPad left">
  <h2 class="page-title">
    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-class="settingsClass"
      popover-is-open="isPopoverOpen" <!-- 新增：绑定显示状态变量 -->
    >
    </span>
  </h2>
</div>

2. 在控制器中添加逻辑：监听resize并关闭Popover #

接下来在你的AngularJS控制器里，初始化状态变量、监听窗口resize事件，触发时关闭Popover，同时记得清理监听避免内存泄漏：

angular.module('yourApp').controller('YourController', ['$scope', '$window', function($scope, $window) {
  // 初始化Popover状态为关闭
  $scope.isPopoverOpen = false;

  // 定义resize事件处理函数
  var handleResize = function() {
    // 调整大小时关闭Popover，用$apply触发Angular视图更新
    $scope.$apply(function() {
      $scope.isPopoverOpen = false;
    });
  };

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

  // 控制器销毁时移除监听，防止内存泄漏
  $scope.$on('$destroy', function() {
    angular.element($window).off('resize', handleResize);
  });
}]);

关键细节说明： #

• popover-is-open是Angular UI Bootstrap提供的核心属性，专门用于手动控制Popover的显示/隐藏。
• 用$scope.$apply()是因为resize事件属于Angular上下文之外的原生事件，需要手动触发digest循环来同步视图更新。
• 务必在控制器销毁时移除resize监听，避免无用的事件监听占用内存。

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