如何以编程方式打开和关闭 Angular-UI 弹出窗口

问题描述

我需要创建从服务器获取其内容的弹出窗口.

I need to create popovers that gets its content from the server.

所以我创建了以下指令:

So I created the following directive:

.directive('myPopover', [myService, function ($myService) {
        return {
            restrict: 'E',
            transclude: true,
            template: '<a href="" ng-click="wordClicked()" class="highlight" popover-trigger="manual" popover="Adequately good for the circumstances" popover-title="good enough " popover-placement="bottom" ng-transclude></a>',
            link: function (scope, element, attrs) {
                scope.wordClicked = function () {
                    if ( POPUP IS NOT SHOWING ){
                        var message = myService.getMessage({key: element.text()},
                            function () {
                                    console.info("NEED TO SHOW POPOVER WITH "+ message);
                                });
                    }
                    else {
                        console.info("NEED TO CLOSE POPOVER");
                    }
                }
            }
        }
    }]);

在 getMessage 成功方法中，我需要制作弹出框来显示.documentation 没有给出任何指示，尽管我发现了评论作者 Luthur 这里 似乎有一个 popover-trigger="manual" 选项.找不到以编程方式触发它的方法

And inside getMessage success method I need to make the popover to show.The documentation does not give any indication for that though I found comment madeBy Luthur here it seems like there is a popover-trigger="manual" option.Could not find a way to trigger it programmatically

更新:我尝试遵循 Mosho 建议，但在使用自定义事件触发器创建弹出窗口时遇到问题.

Update:I tried to follow Mosho advice but I am having troubles creating a popover with the custom event trigger.

参见 plnkr

谢谢！

推荐答案

首先，如果您还没有看过，这里是工具提示和弹出框的来源:

First, if you haven't already looked, here are the sources for tooltips and popovers:

tooltip.js

popover.js

您可以添加自定义触发器.弹出框使用 $tooltip 提供程序:

You can add custom triggers. Popovers use the $tooltip provider:

.directive( 'popover', [ '$tooltip', function ( $tooltip ) {
  return $tooltip( 'popover', 'popover', 'click' );
}]);

$tooltip 的提供者 $get 方法，用于创建新的 tooltip 方法，在此处定义:

Where the $tooltip's provider $get method, used to make new tooltip's, is defined here:

 this.$get = [ '$window', '$compile', '$timeout', '$parse', '$document', '$position', '$interpolate', function ( $window, $compile, $timeout, $parse, $document, $position, $interpolate ) {
    return function $tooltip ( type, prefix, defaultTriggerShow ) {...}

$tooltip 提供程序具有以下方法:(triggerMap 是在 $tooltip 提供程序中定义的 3 个开箱即用的触发器.

The $tooltip provider has this method: (triggerMap is the 3 triggers that are defined in the $tooltip provider out of the box.

   /**
   * This allows you to extend the set of trigger mappings available. E.g.:
   *
   *   $tooltipProvider.setTriggers({'openTrigger': 'closeTrigger'});
   */
  this.setTriggers = function setTriggers ( triggers ) {
    angular.extend( triggerMap, triggers );
  };

您可以在配置块中使用它，如下所示:

You can use it in a config block, like this:

myApp.config(['$tooltipProvider', function ( $tooltipProvider ) {
  $tooltipProvider.setTriggers({'openTrigger': 'closeTrigger'}) ;
}]);

然后，您可以像这样创建一个新的 popover 指令:

Then, you can create a new popover directive like this:

.directive('myPopover', ['$tooltip', function ( $tooltip ) {
  return $tooltip( 'myPopover', 'myPopover', 'openTrigger' );
}]);

然后触发弹出框就像 element.triggerHandler( 'openTrigger' ) (或 closeTrigger)一样简单，其中 element 是弹出框.

And triggering the popover would then be as simple as element.triggerHandler( 'openTrigger' ) (or closeTrigger) where element is the popover.

这篇关于如何以编程方式打开和关闭 Angular-UI 弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！