Угловой начальный загрузчик исчезает, когда мышь входит в него - PullRequest
Новая
       22

Угловой начальный загрузчик исчезает, когда мышь входит в него

1 голос
/ 23 сентября 2019

У меня есть угловой загрузочный поповер на каком-то тексте.Во всплывающем окне я показываю ссылку, по которой пользователь может щелкнуть эту ссылку и перейти на этот веб-сайт.В настоящее время, когда пользователь пытается войти внутрь поповера, он исчезает.

Если я пытаюсь держать поповер открытым, а не зависать при щелчке, он не закрывается при переходе к другому поповеру.

Я создал jsfiddle , где вы можете увидеть 

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

Я должен быть в состоянии щелкнуть ссылку, отображаемую при наведении курсора, и одновременно должен быть открыт один элемент при наведении.

1 Ответ

1 голос
/ 23 сентября 2019

Вы можете сделать это, удалив 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>

Примечание : я не уверен, почему нажатие на ссылку не открывает ее при использовании фрагментов кода в StackOverflow (он работает в других онлайн-редакторах кода), но вы можете щелкнуть правой кнопкой мыши и открыть новую вкладку, чтобы увидеть, как это работает.Это явно проблема с самими фрагментами, так как даже использование ссылки в HTML напрямую не открывает ссылку.

...