javascript - 几秒钟后 Angular 引导弹出窗口隐藏

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()  

在 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