Подтвердить что ты не робот

Скрыть Angular UI Bootstrap popover при нажатии за его пределами

Я пытаюсь вручную закрыть загрузочный popover, чтобы закрыть его, когда я нажимаю в любом месте document или body, который не является popover.

Самое близкое, что я нашел для этого, - создать директиву (нашел этот ответ), но это для ручного триггера, если переменная истинна или ложна.

Может ли кто-нибудь помочь мне разобраться, как закрыть его, если я нажму на все, что не является popover?

Я не против использования jQuery $(document).click(function(e){}); Я просто не знаю, как вызвать close.

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Обычно popover-trigger="focus" выполняет трюк, однако мой popover содержит контент, на который нужно нажать. У меня есть ng-click внутри моего popover, который игнорируется, если я использую триггер фокуса, поэтому я ищу не так привычный способ обойти это.

4b9b3361

ОТВЕТЫ

Ответ 1

Редакция:

Демо-версия плунжера

Здесь, как это работает (длинное и исчерпывающее объяснение):

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

Создайте настраиваемую директиву для таргетинга на триггерный элемент:

Вам нужно вызвать специальный обработчик событий из элемента, который открыл popover (в демо это кнопка). Задача состоит в том, что popover добавляется в качестве родного брата к этому элементу, и я всегда думаю, что у вещей больше возможностей сломаться, когда вы пересекаете DOM и ожидаете, что у него будет определенная структура. Существует несколько способов настроить таргетинг на триггер-элемент, но мой подход заключается в добавлении уникального имени класса в элемент (я выбираю "триггер" ) при нажатии на него. Только один popover может быть открыт одновременно в этом сценарии, поэтому можно безопасно использовать имя класса, но вы можете изменить его в соответствии с вашими предпочтениями.

Пользовательская директива

app.directive('popoverElem', function(){
  return{
    link: function(scope, element, attrs) {
      element.on('click', function(){
        element.addClass('trigger');
      });
    }
  }
});

Применяется к кнопке

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

Создайте настраиваемую директиву для тела документа (или любого другого элемента), чтобы вызвать закрытие popover:

Последняя часть состоит в том, чтобы создать пользовательскую директиву, в которой будет обнаружен элемент запуска и запустить пользовательское событие, чтобы закрыть popover, когда щелкнут элемент, к которому он применяется. Конечно, вы должны исключить начальное событие клика из элемента "триггер" и любые элементы, с которыми вы хотите взаимодействовать внутри вашего popover. Поэтому я добавил атрибут, называемый exclude-class, чтобы вы могли определить класс, который вы можете добавить к элементам, события кликов которых должны игнорироваться (не заставляя popover закрываться).

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

app.directive('popoverClose', function($timeout){
  return{
    scope: {
      excludeClass: '@'
    },
    link: function(scope, element, attrs) {
      var trigger = document.getElementsByClassName('trigger');

      function closeTrigger(i) {
        $timeout(function(){ 
          angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
        });
      }

      element.on('click', function(event){
        var etarget = angular.element(event.target);
        var tlength = trigger.length;
        if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
          for(var i=0; i<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

Я добавил это в тег body, так что вся страница * действует как неприглядный фон для popover:

<body popover-close exclude-class="exclude">

И я добавил класс exclude для ввода в popover:

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

Итак, есть некоторые хитрости и gotchas, но я оставлю это вам:

  • Вы должны установить класс исключения по умолчанию в функции ссылок директивы popover-close, если один из них не определен.
  • Вам нужно знать, что директива popover-close привязана к элементу, поэтому, если вы удалите стили, которые я установил в элементах html и body, чтобы дать им 100-процентную высоту, вы могли бы иметь "мертвые зоны" в вашем окне просмотра, если ваш контент не заполняет его.

Протестировано в Chrome, Firefox и Safari.

Ответ 2

UPDATE. С выпуском 1.0 мы добавили новый триггер под названием outsideClick, который автоматически закрывает popover или всплывающую подсказку, когда пользователь нажимает кнопку за пределами popover или всплывающей подсказки.

Начиная с версии 0.14.0, мы добавили возможность программного управления, когда ваша всплывающая подсказка /popover открыта или закрыта с помощью атрибутов tooltip-is-open или popover-is-open.

Ответ 3

Так как Angular UI Bootstrap 1.0.0, появляется новый outsideClick триггер для всплывающих подсказок и popovers (введен в этот запрос на растяжение В Angular UI Bootstrap 2.0.0 параметр popover-trigger был изменен для использования выражений Angular (Changelog), поэтому значение должно быть помещено в кавычки. Этот код будет работать с текущими версиями angular -ui:

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Этот код будет работать со старыми версиями Angular UI Bootstrap (до 2.0.0):

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

Ответ 4

Существует свойство popover-trigger, которое можно присвоить свойству focus.

<button 
      popover-placement="right" 
      popover="On the Right!" 
      popover-trigger="focus" 
      class="btn btn-default">
   Right
</button>

Это трюк!:)

Изменить: Чтобы включить всплывающую подсказку, а не отключить фокус, рассмотрите подход аналогичный этому

Если вы хотите, чтобы он работал в angular, попробуйте создать собственное определение триггера. Предложения о том, как это сделать, можно найти здесь.

Ответ 5

popover-trigger="'outsideClick'" Это будет работать отлично.

popover-trigger="outsideClick" Это не будет.

Я занял 1 день, чтобы разобраться, почему он не работал у меня.

Это потому, что они проверяют это с помощью этого кода, "if (trigger === 'outsideClick')"

Ответ 6

То, что вы ищете, это

<button
      popover-trigger="outsideClick" 
      class="btn btn-default">
   Right
</button>

Из документации - триггер outsideClick заставит popover переключаться на клик и скрыть, когда что-либо еще нажата.

Ответ 7

Вы можете использовать:

Разметка

<div ng-app="Module">
    <div ng-controller="formController">
        <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" 
          popover-placement="left" type="button" class="btn btn-default">
             Popover With Template
        </button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
        </script>
    </div>
</div>

Javascript

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>

Ответ 8

У меня была такая же проблема, и popover-trigger="'outsideClick'" работал у меня. Интересно, что в документации не указан этот вопрос.

Ответ 9

Angular boostrap ui новая версия 1.x имеет возможность выхода из функции бокового щелчка. обновите его до новой версии.

<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>

его работа для меня.

фокус не будет работать, если какая-либо кнопка отправки или событие click в popover. поэтому этот полезный способ сделать.

Ответ 10

Как насчет опции outsideClick 'в методе $uibTooltipProvider' setTriggers. Документация гласит: "Триггер openClick заставит всплывающую подсказку переключиться на клик и скрыть, когда что-нибудь еще нажата". Документация

Ответ 11

Добавьте поведение onclick="void(0)" к некоторым из ваших фоновых элементов, которые при нажатии будут избавлены от popovers.

Посмотрите https://github.com/angular-ui/bootstrap/issues/2123