Angular bootstrap 鼠标进入弹出框消失

Question

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

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

我创建了一个 jsfiddle，您可以在其中看到

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

我应该可以点击悬停显示的 link，同时应该打开单个悬停。

Answer 1

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

这是一个工作示例。

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>

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

Angular bootstrap 鼠标进入弹出框消失

Angular bootstrap popover disappears when the mouse enters it

javascript

angularjs

angular-ui-bootstrap