Angular UI Bootstrap Popover - How add a close button

Question

I\'ve a table with a popover for every cell as in the follow example:

the call to popover:

Answer 1

The proper solution using the new popover-is-open attribute, as mentioned by @icfantv below, allows the use of controller scopes. I placed a live example in Codepen, and it goes like this:

app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller(
  'myPopoverCtrl', ['$scope',
    function($scope) {

      // query popover
      $scope.myPopover = {

        isOpen: false,

        templateUrl: 'myPopoverTemplate.html',

        open: function open() {
          $scope.myPopover.isOpen = true;
          $scope.myPopover.data = 'Hello!';
        },

        close: function close() {
          $scope.myPopover.isOpen = false;
        }
      };

    }

  ]);

  
  
  
  
  





  Click me!

  

---

Original answer:

I spent the last two days on this problem, and finally came up with a simple enough hack. This goes on my controller:

 $scope.close = function(e) {
     el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
                                                   // element, in this case a `span`
     $timeout(function() { // need $timeout so we don't conflict with the digest loop
     el.children(":first").trigger('close'); // couldn't select the `span` element directly
     });
 },

Now we set up the close trigger on the provider:

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'click': 'close', // Clicks now only open the tooltip, 'close' events close it.
  });
}]);

And on my custom popover HTML template:

Close

Voila! I can now close the popover through the button!