Use outsideClick to close custom directive popover

Question

I have a popover as a custom directive that opens when an icon is clicked or hovered upon. When the icon is clicked the popover sticks, and will close if you click the icon again. Now I want to close the popover after it's clicked by clicking anywhere else but the popover. Below is my code...

MY CUSTOM DIRECTIVE

(function () {
  'use strict';

  angular.module('frontend.core.directives')
    .directive('myPopover', [
      function directive() {
        return {
          restrict: 'E',
          templateUrl: '/frontend/core/directives/my-popover/my-popover.html',
          scope: {
            trigger: '@',
            title:'@'
          },
          transclude: true,
          link: function (scope, elm, attrs) {
            //Need to hide content first
            elm.hide();
            //plugin binder
            $(scope.trigger).popover({
              html: true,
              trigger: 'hover click',
              placement: 'auto',
              content: function () {
                return elm.html();
              },
              title: function () {
                return scope.title;
              }
            });

          }
        };
      }
    ]);
}());

MY HTML

<div>
<i id="touch-details" class="fa fa-info-circle"></i>
<my-popover trigger="#touch-details" my-popover-trigger="outsideClick" title="Details">
    <span>
       Inside of my popover
    </span>
</my-popover>
</div>

Please tell me what I need to do to enable closing the popover when clicked outside.

if your popover has some sort of overlay behind it, you could always check if that overlay has been clicked. Something like: `overlay.on('click', function() {myPopover.close();});` inside your directive — Brent McFerrin, Mar 18 '16 at 18:41

jstuartmilne · Answer 1 · 2016-03-18T17:56:51.690

Try injecting the $document into you directive and controlling in the event weather the click is inside the div holding the popup or outside the div. So something like this :

angular.module('frontend.core.directives')
    .directive('myPopover', [
      function directive($document) {

.......

  $document.on('click', function(event){

     event.originalEvent //This holds among other things where the click was made. If click was not made in the div containing the popup, then take an action
});

Hope it helps

score 0 · Answer 2 · answered Mar 18 '16 at 21:21

There is a property called popover-trigger that you can assign the property focus, which works as you want, on blur event. In addition, with ui-bootstrap you can easily use the popover and tooltips of bootstrap with angularjs like in this example:

<button popover-placement="top" 
        popover-title="Hello Word!"
        popover-class = "someClass"
        popover-trigger = "focus"
        uib-popover="I appeared on blur!"
        type="button" class="btn btn-default">
        Check
</button>

score 0 · Accepted Answer · answered Mar 23 '16 at 22:25

Actually the answer was already created. Just needed to tweak a little to match Angular syntax. So the '$' were changed to 'angular.element'. For example...

$('body').on('click'

is equivalent to

angular.element('body').on('click'

See link...

http://jsfiddle.net/raving/jpsmegvL/

Use outsideClick to close custom directive popover

3 Answers3