Angular Bootstrap弹出框几秒后自动隐藏

Question

这是我的HTML代码：

这是需要翻译的内容：

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

点击图标后，弹出框按预期打开。 当前，只有通过单击图标才能关闭弹出框。 我希望在几秒钟后自动关闭弹出框。

以下是我的JavaScript代码 - 但它并不起作用：

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

运行时

$('.pop').popover()  

在 Firefox 调试器中，我得到了以下信息：

typeError: undefined is not a function

请帮忙：)

- john Smith

---

你能准备一个演示吗？ - PSL

Answer 1

受到@dfsq的有关tt_isOpen的想法的启发，您可以创建一个自定义指令来进行自动隐藏。

.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);
        }
      });
    }
  }
});

使用方法如下：

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

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

- runTarm

---

我会说这就是该怎么做。而不是像我的例子一样搞控制器。这种方法才是唯一正确的。 - dfsq

Answer 2

我能想到的唯一方法有点奇怪，但是有效。在你的LI元素上添加 ngMousedown 处理程序，并在控制器中定义一个处理程序：

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

Controller:

$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

- dfsq

Answer 3

最简单的方法是创建一个布尔类型的变量，并为其赋值True/False，如果您点击了弹出窗口，控制器将调用一个方法并设置一个超时，以将变量翻转为False。这个变量将在标签“ng-show”中使用来显示和隐藏。

此致敬礼

- user3482773