Как скрыть bs-popover на основе событий

Я использую bs-popover для отображения содержимого при нажатии (в виде меню) в angularjs. Но мне нужно скрыть это всплывающее меню, когда я нажимаю где-нибудь в окне браузера. Я хочу, чтобы это было отклонено на таком мероприятии. Как я могу это сделать?


angularjs popover
person anilCSE    schedule 27.05.2013    source источник
comment
bs-popover подразумевает всплывающее окно Twitter Bootstrap?   -  person callmekatootie    schedule 27.05.2013
comment
да. это из бутстрапа   -  person anilCSE    schedule 27.05.2013
comment
Мой ответ будет работать на вас. :)   -  person Jay Shukla    schedule 21.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Для этого нужно написать директиву.

yourApp.directive('bndocumentclick',
 function($document,$rootScope,$timeout) {
  return {
    restrict: 'EA',
     link : function(scope, element, attrs) {
        $document.on("click", function(ev) {
           // Do stuff here to remove your popover.
        }
     }
 }
});

HTML

<body bndocumentclick>

А также

<div bs-popover ng-click="$event.stopPropagation()">

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

person Jay Shukla    schedule 21.08.2013

arrow_upward
0
arrow_downward

Решение, предложенное @Jay Shukla, не работает.

«$event.stopPropagation()» в элементе, который запускает всплывающее окно, не предотвращает его закрытие, когда вы делаете щелчок внутри всплывающего окна. Если у вас есть какое-то взаимодействие внутри вашего всплывающего окна, это будет проблемой.

Это работает:

angular.module('yourApp')
.directive('closePopovers', function ($document, $rootScope, $timeout) {
return {
  restrict: 'EA',
  link: function (scope, element, attrs) {
    $document.on('click', function (ev) {

      var targetElem = angular.element(ev.target);

      if (targetElem.data('toggle') !== 'popover' 
      && targetElem.parents('[data-toggle="popover"]').length === 0 
      && targetElem.parents('.popover').length === 0) {

        $('.popover').each(function () {
            var $this = $(this);
            var scope = $this.scope();
            scope.$apply(function () {
              scope.$hide();
            });
          }
        );
      }
    });
  }
};
});

На вашем теле:

На вашем элементе, который вызывает всплывающее окно:

<button data-toggle="popover" [other data elements here] bs-popover>Toggle popover</button>
person Rodrigo Reis    schedule 03.04.2014