如何根據事件隱藏bs-popover

我正在使用bs-popover在angularjs中單擊（作爲菜單）來顯示我的內容。但是當我點擊瀏覽器窗口中的某個地方時，我需要隱藏這個彈出式菜單。我希望在這種事件中被解僱。我怎樣才能做到這一點？如何根據事件隱藏bs-popover

2013-05-27 anilCSE

'BS-popover'意味着Twitter的引導酥料餅？ – callmekatootie

是的。它從引導 – anilCSE

我的答案將爲你工作。 :) –

您需要爲此編寫指令。

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()">

您需要使用，因爲你不希望關閉酥料餅只要裏面酥料餅的用戶點擊。

來源

2013-08-21 10:48:03

由@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>

來源

2014-04-03 07:35:50

如何根據事件隱藏bs-popover

回答

相關問題