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

How to Open and Close Angular-UI popovers programmatically

本文关键字：Angular UI 窗口 编程 方式打      更新时间：2023-09-26

我需要创建从服务器获取内容的popover。

所以我创建了以下指令：

.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成功方法中，我需要制作popover来显示。尽管我发现有人发表了评论，但文件并没有对此做出任何说明Luthur在这里似乎有一个popover-trigger="manual"选项。找不到以编程方式触发它的方法

更新：我试图遵循Mosho的建议，但我在使用自定义事件触发器创建popover时遇到了问题。

参见plnkr

谢谢！

首先，如果您还没有看过，下面是工具提示和弹出窗口的来源：

tooltip.js

popover.js

您可以添加自定义触发器。弹出窗口使用$tooltip提供程序：

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

这里定义了$tooltip的提供者$get方法，用于制作新的tooltip：

 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个触发器。

   /**
   * 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 );
  };

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

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

然后，您可以创建一个新的popover指令，如下所示：

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

然后触发popover将像element.triggerHandler( 'openTrigger' )（或closeTrigger）一样简单，其中element是popover。

我扩展了popover指令，以便添加一个接受布尔值的属性"pop-show"：

angular.module('app', [ 'ui.bootstrap' ])
  .directive( 'popPopup', function () {
    return {
      restrict: 'EA',
      replace: true,
      scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
      templateUrl: 'template/popover/popover.html'
    };
  })
  .directive('pop', function pop ($tooltip, $timeout) {
    var tooltip = $tooltip('pop', 'pop', 'event');
    var compile = angular.copy(tooltip.compile);
    tooltip.compile = function (element, attrs) {
      var first = true;
      attrs.$observe('popShow', function (val) {
        if (JSON.parse(!first || val || false)) {
          $timeout(function () {
            element.triggerHandler('event');
          });
        }
        first = false;
      });
      return compile(element, attrs);
    };
    return tooltip;
  });

我创建了一个Plunker，并举例说明如何使用此指令：

http://plnkr.co/edit/94ZHgQ?p=preview

相关文章：