鼠标进入时，角度引导弹出框消失

Question

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

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

我创建了一个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 手动触发弹出窗口。您将需要使用数组来跟踪打开的弹出框。您还必须清理要在弹出窗口中显示为 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 上使用代码 sn-ps 时单击链接不会打开它（它适用于其他在线代码编辑器），但您可以右键单击并在新选项卡中打开以查看它是否有效。这显然是 sn-ps 本身的问题，因为即使直接使用 HTML 中的链接也不会打开链接。