javascript - 当鼠标进入时，Angular bootstrap popover 消失

Question

我在某些文本上有一个 Angular Bootstrap 弹出窗口。在弹出窗口中，我显示了一些链接，用户可以在其中单击该链接并转到该网站。目前，当用户试图进入弹出窗口时，它会消失。

如果我尝试在单击而不是悬停时保持弹出窗口打开，当我转到另一个弹出窗口时它不会关闭。

我创建了一个 jsfiddle在哪里可以看到

<div popover="{{careerAttribute.value}}"
     popover-append-to-body="true"
     popover-title="{{careerAttribute.title}}"
     popover-trigger="mouseenter"
     popover-placement="right"> HP
</div>

我应该能够点击悬停显示的链接，并且一次应该打开单个悬停。

Answer 1

您可以通过删除 popover-append-to-body 来做到这一点。这样它将把它附加到当前元素。现在，我们不再使用默认的 popover-trigger，而是手动打开和关闭来自父级 td 的元素。为此，我们需要将 popover-trigger 设置为 none，然后使用 ng-mouseenter 和 ng-mouseleave父级使用 popover-is-open 手动触发 popover。您将需要使用数组来跟踪打开的弹出窗口。您还必须清理要在弹出窗口中显示为 HTML 的 URL。

这是一个工作示例。

angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
  .controller('myCtrl', ['$scope', '$sce', ($scope, $sce) => {
    $scope.isOpen = new Array(2).fill(false);
    $scope.careerAttribute = {
      'title': 'Here is The Title',
      'value': $sce.trustAsHtml('<a target="_blank" href="https://www.google.com">Google</a>')
    };
    
    $scope.open = (popoverId) => {
      $scope.isOpen[popoverId] = true;
    }
    
    $scope.close = (popoverId) => {
      $scope.isOpen[popoverId] = false;
    }
  }]);

[uib-popover-html] {
  margin: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ng-app="myApp" ng-controller='myCtrl'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Address</th>
      </tr>
    </thead>
    <tr>
      <td ng-mouseenter="open(0)" ng-mouseleave="close(0)">
        <div uib-popover-html="careerAttribute.value" popover-title="{{careerAttribute.title}}" popover-is-open="isOpen[0]" popover-trigger="'none'" popover-placement="right">
          Hover for Popup
        </div>
      </td>
      <td>India</td>
    </tr>
    <tr>
      <td ng-mouseenter="open(1)" ng-mouseleave="close(1)">
        <div uib-popover-html="careerAttribute.value" popover-title="{{careerAttribute.title}}" popover-is-open="isOpen[1]" popover-trigger="'none'" popover-placement="right">
          Hover for Popup
        </div>
      </td>
      <td>India</td>
    </tr>
  </table>
</div>

注意:我不确定为什么在 StackOverflow 上使用代码片段时单击链接无法打开它(它适用于其他在线代码编辑器)，但您可以右键单击并打开一个新选项卡以查看它是否有效。这显然是片段本身的问题，因为即使直接使用 HTML 中的链接也不会打开链接。