uib-popover not closing on outside click

Question

I´m using the Angular UI Bootstrap Popover, but I´m unable to get it to close on outside click. I´m using the outsideClick trigger (popover-trigger="outsideClick") Why is this not working?

  <button uib-popover-template="'myPopoverTemplate.html'"  
   popover-placement="right"class="btn btn-default"
   popover-trigger="outsideClick">Click Me</button>

PLUNKER

EDIT: This works with ui-bootstrap 1.x.x (e.g. 1.3.3). Is this not supported in 2.x.x?

score 1 · Answer 1 · answered Feb 09 '17 at 15:09

The issue is in your cdn files. Check working code below-

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">


</head>

<body >
  <div  ng-controller="PopoverDemoCtrl">
   <h1>Popover Test</h1>

    <button uib-popover-template="'myPopoverTemplate.html'"  
            popover-placement="right"
            class="btn btn-default" popover-trigger="outsideClick"
            >
      Click Me
      </button>


    <script type="text/ng-template" id="myPopoverTemplate.html">

      <label> Why does this popover not close on outside click? </label>
    </script>
  </div>
</body>

</html>

Not according to the documentation on https://angular-ui.github.io/bootstrap/ "The outsideClick trigger will cause the popover to toggle on click, and hide when anything else is clicked." — Kjartan Valur Þórðarson, Feb 10 '17 at 08:42

score 0 · Accepted Answer · answered Feb 13 '17 at 11:00

0

It's because on ui-bootstrap 2.x.x you have to do :

popover-trigger="'outsideClick'">Click Me</button>

Or use something like

$scope.myTrigger = "outsideClick" then
popover-trigger="myTrigger">Click Me</button>

Thanks to @AngularPlayer

answered Feb 13 '17 at 11:00

Kjartan Valur Þórðarson

1,189
1
13
29

uib-popover not closing on outside click

2 Answers2

Linked