2

I am using the Angular UI Bootstrap popover ( http://angular-ui.github.io/bootstrap/#/popover ) and would like to specify a callback function to execute when it is opened and another for when it is closed. My use case is that I am using the popover to contain filters for a grid of data. I would like to load some remote filtering options on open, apply the selected filters only when the popover is closed.

The documentation only appears to support a few basic options but no indication of callback support. I'm not seeing anything in the source code either. Is my only option to set an interval function to check periodically if the popover is visible in the DOM?

I'm also considering Angular Strap's popover to achieve the same result, but can't seem to find the option to set callbacks there either.

4

4 回答 4

5

似乎 Koni 和 user2453461 的答案不再像popover.js使用执行发出事件的tooltip.js一样起作用。您应该能够执行以下操作：

$scope.$on('tooltip.show.before', function() {
    console.log("show before");
 });

$scope.$on('tooltip.show', function() {
    console.log("show");
 });


$scope.$on('tooltip.hide.before', function() {
  console.log("hide before");
});

$scope.$on('tooltip.hide', function() {
  console.log("hide");
});

不过，不确定这是一个多么好的主意，因为语法似乎会随着版本的变化而变化。

于 2014-06-17T15:19:14.820 回答
0

我找到了 AngularStrap 的解决方案。它发出popover-*我可以在这里挂钩的事件：

https://github.com/mgcrea/angular-strap/blob/3c8bd1d37ab3b023bd79f9b0c1a6931b18e2ac84/src/directives/popover.js#L110

因此，在我的弹出框控制器中使用它，我可以连接到隐藏/显示。这适用于模态，但对于带有popover-前缀的弹出框的工作方式相同

https://github.com/mgcrea/angular-strap/issues/107#issuecomment-16701662

于 2013-09-16T22:06:31.300 回答
0

对我来说，user2453461 说：

$scope.$on('popover-shown', function() {
    console.log("SHOWN");
 });

 $scope.$on('popover-hidden', function() {
    console.log("HIDDEN");
 });
于 2013-11-28T15:54:27.080 回答
0

Popover "继承自" $tooltip，其中$emitsatooltip.hide.before然后是一个tooltip.hide事件。但是，由于它是$emiting 而不是$broadcasting，因此只有 popover 的范围（及其子范围，但不太可能有）可以访问该事件。

在我的代码（coffeescript）中，这看起来像：

.directive 'ngPopoverParent', ($popover) ->

  link: (scope, element, attrs) ->

    popover = $popover element,
      'title': attrs.title
      'content': attrs.content
      'animation': attrs.animation
      'trigger': 'click'

    popover.$promise.then ->
      popover.$scope.$on 'tooltip.hide', ->
        console.log('tooltip hidden!')

相关来源： https ://github.com/mgcrea/angular-strap/blob/08167f7d5f52424b0f6fe40f3a053e134f550472/src/tooltip/tooltip.js

于 2014-05-01T17:08:00.353 回答