Question

这是我的HTML代码：

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

单击图标时，按预期打开弹出窗口。只需单击图标即可关闭弹出窗口。我希望在几秒钟后自动关闭popover。

这是我的javascript代码 - 不起作用：

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

运行时

$('.pop').popover()

我得到的FF调试器

：

typeError: undefined is not a function

请帮助：）

Answer 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

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

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

最好的问候

几秒后，角度引导弹出隐藏

3 个答案:

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