AngularJS中uib-popover点击外部无法隐藏的问题求助

我之前也踩过版本兼容性的坑，结合你的场景，给你几个可行的排查和解决方向：

1. 先核对UI Bootstrap版本兼容性 #

你用的是AngularJS 1.3.13和Bootstrap 3.2.0，对应的*Angular UI Bootstrap（也就是uib-组件）必须是0.12.x系列（比如0.12.2）。如果你的UI Bootstrap版本太旧（0.11.x及更早），outsideClick这个触发方式可能还没被支持；如果版本太新（0.13+），又会和AngularJS 1.3.x出现兼容性冲突。

你可以查看项目依赖或者页面引入的ui-bootstrap.js文件顶部注释确认版本，要是版本不匹配，先调整到对应的0.12.x版本试试，这是最容易解决的情况。

2. 手动控制popover显示/隐藏（绕过trigger失效问题） #

如果版本没问题但outsideClick还是不生效，可以用popover-is-open绑定一个scope变量，手动监听外部点击来控制状态，步骤如下：

步骤1：在控制器中添加逻辑 #

angular.module('yourApp').controller('YourController', function($scope, $document) {
  // 控制popover显示的变量
  $scope.isPopoverOpen = false;

  // 切换popover状态的方法
  $scope.togglePopover = function() {
    $scope.isPopoverOpen = !$scope.isPopoverOpen;
  };

  // 监听全局点击事件
  function handleOutsideClick(event) {
    var target = angular.element(event.target);
    // 判断点击目标是否在按钮或popover内部
    if (!target.closest('.btn').length && !target.closest('.popover').length) {
      $scope.$apply(function() {
        $scope.isPopoverOpen = false;
      });
    }
  }

  $document.on('click', handleOutsideClick);

  // 控制器销毁时移除事件监听，避免内存泄漏
  $scope.$on('$destroy', function() {
    $document.off('click', handleOutsideClick);
  });
});

步骤2：修改按钮模板 #

把原来的popover-trigger改成none，绑定popover-is-open和点击事件：

<button 
  tooltip-placement="bottom" 
  tooltip="{{'common.addRemoveColumn'| translate}}" 
  class="btn btn-default pull-right" 
  uib-popover 
  popover-trigger="none" 
  popover-placement="bottom" 
  uib-popover-template="'gridColumns.html'" 
  data-original-title="{{'common.customizeColumn'| translate}}"
  popover-is-open="isPopoverOpen"
  ng-click="togglePopover()"
>
  <i class="fa fa-columns"></i>
</button>

3. 自定义指令封装外部点击逻辑 #

如果不想在控制器里写太多全局逻辑，可以封装一个自定义指令来处理：

自定义指令代码 #

angular.module('yourApp').directive('closePopoverOnOutside', function($document, $timeout) {
  return {
    link: function(scope, element) {
      // 延迟执行，确保popover已经渲染完成
      $timeout(function() {
        var popoverEl = angular.element(document.querySelector('.popover'));

        function closePopover(event) {
          // 点击不在按钮和popover内时关闭
          if (!element[0].contains(event.target) && !popoverEl[0].contains(event.target)) {
            scope.$apply(function() {
              // 通过设置popover-is-open为false关闭
              element.attr('popover-is-open', 'false');
              scope.$eval(element.attr('popover-is-open'));
            });
            $document.off('click', closePopover);
          }
        }

        $document.on('click', closePopover);

        // 指令销毁时移除监听
        scope.$on('$destroy', function() {
          $document.off('click', closePopover);
        });
      });
    }
  };
});

在按钮上使用指令 #

<button 
  tooltip-placement="bottom" 
  tooltip="{{'common.addRemoveColumn'| translate}}" 
  class="btn btn-default pull-right" 
  uib-popover 
  popover-trigger="'outsideClick'" 
  popover-placement="bottom" 
  uib-popover-template="'gridColumns.html'" 
  data-original-title="{{'common.customizeColumn'| translate}}"
  popover-is-open="isPopoverOpen"
  close-popover-on-outside
>
  <i class="fa fa-columns"></i>
</button>

关键注意事项 #

• AngularJS 1.3.x中，修改scope变量后必须用$apply包裹才能触发视图更新，否则popover状态不会同步。
• 一定要在控制器/指令销毁时移除全局事件监听，防止内存泄漏。
• 如果页面有多个popover，需要给popover加自定义class来精准定位当前元素，避免互相干扰。

内容的提问来源于stack exchange，提问作者Syed mohamed aladeen