Angular bootstrap popover hide in a few seconds

Question

This is my html code:

<li class="pop" popover="popover text goes here" popover-trigger="mousedown">
    <a><i class="icon-link"></i></a>
</li>

When you click on the icon, a pop-up window opens as expected. Currenly popover closes only by clicking on the icon. I want the popover to close automatically after a few seconds.

This is my javascript code - which doesn't work:

$('.pop').popover().click(function () {
   setTimeout(function () {
     $('.pop').popover('hide');
   }, 4000);
}); 

at startup

$('.pop').popover()  

in the FF debugger that I get:

typeError: undefined is not a function

Please, help:)

Answer 1

Inspired by @dfsq 's ideatt_isOpen , you can create a custom directive to automatically hide.

.directive('popoverAutoclose', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var timeoutHandle;

      scope.$watch('tt_isOpen', function (isOpen) {
        $timeout.cancel(timeoutHandle);

        if (isOpen) {
          timeoutHandle = $timeout(function () {
            scope.tt_isOpen = false;
          }, +attrs.popoverAutoclose || 5000);
        }
      });
    }
  }
});

And use it as follows:

<li class="pop" popover="popover text goes here" popover-autoclose="2000" popover-trigger="mousedown">

Plunker: http://plnkr.co/edit/KQKHtz73lFk8Z4g4q6a4?p=preview

Answer 2

, , , . ngMousedown LI :

<li class="pop" popover="popover text goes here" ng-mousedown="mousedown()" popover-trigger="mousedown">
    <a><i class="icon-link"></i> Link</a>
</li>

:

$scope.mousedown = function() {
    var tooltipScope = this;
    $timeout(function() {
        tooltipScope.tt_isOpen = false;
    }, 2000);
};

, AngularUI popover $tooltip, . tt_isOpen. false, .

: http://plnkr.co/edit/T1Uouba0MU2vtcwuRPt9?p=preview

Answer 3

The easiest way is to create a variable that is logical and give it True / False, and if you click on the pop-up window, the method will be called by the controller throw and there will be a timeout that the variable flips - False. This variable will be used in the "ng-show" tag to show and hide.

Regards