几秒钟后，角度引导弹出窗口隐藏答案

【问题标题】：angular bootstrap popover hide after few seconds几秒钟后，角度引导弹出窗口隐藏
【发布时间】：2014-10-02 21:03:42
【问题描述】：

这是我的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()

在我得到的 FF 调试器上：

typeError: undefined is not a function

请帮忙:)

【问题讨论】：

你能准备一个演示吗..

标签： javascript jquery angularjs click popover

【解决方案1】：

受@dfsq's idea 关于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

【讨论】：

我会说应该这样做。而不是像我的示例中那样弄乱控制器。这种方法是唯一正确的。

【解决方案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

【讨论】：

【解决方案3】：

最简单的方法是创建一个布尔变量，并给它一个 True/False 值，如果你点击弹出窗口，一个方法将被调用 throw the controller 并且将是一个超时来翻转变量为 False。该变量将在标签“ng-show”中用于显示和隐藏。

最好的问候

【讨论】：