javascript 如何以编程方式打开和关闭 Angular-UI 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23073156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Open and Close Angular-UI popovers programmatically
提问by special0ne
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");
}
}
}
}
}]);
And inside getMessage success method I need to make the popover to show.
The documentationdoes not give any indication for that though I found comment made
By Luthur hereit seems like there is a popover-trigger="manual"option.
Could not find a way to trigger it programmatically
在 getMessage 成功方法中，我需要制作弹出框来显示。该文件没有给出任何指示的，虽然我的发现促使通过Luthur评论这里好像有一个popover-trigger="manual"选项。找不到以编程方式触发它的方法
Update:I tried to follow Moshoadvice but I am having troubles creating a popover with the custom event trigger.
更新：我尝试遵循Mosho 的建议，但在使用自定义事件触发器创建弹出窗口时遇到了麻烦。
see plnkr
Thanks!
谢谢！
回答by Mosho
First, if you haven't already looked, here are the sources for tooltips and popovers:
首先，如果您还没有看过，这里是工具提示和弹出框的来源：
You can add custom triggers. Popovers use the $tooltipprovider:
您可以添加自定义触发器。弹出窗口使用$tooltip提供程序：
.directive( 'popover', [ '$tooltip', function ( $tooltip ) {
return $tooltip( 'popover', 'popover', 'click' );
}]);
Where the $tooltip's provider $getmethod, used to make new tooltip's, is defined here:
在这里定义了用于创建 new$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 ) {...}
The $tooltipprovider has this method: (triggerMap is the 3 triggers that are defined in the $tooltipprovider out of the box.
的$tooltip提供者有这种方法：（triggerMap是在中定义的3个触发器$tooltip提供商开箱。
/**
* 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'}) ;
}]);
Then, you can create a new popover directive like this:
然后，您可以像这样创建一个新的 popover 指令：
.directive('myPopover', ['$tooltip', function ( $tooltip ) {
return $tooltip( 'myPopover', 'myPopover', 'openTrigger' );
}]);
And triggering the popover would then be as simple as element.triggerHandler( 'openTrigger' )(or closeTrigger) where elementis the popover.
然后触发弹出框就像element.triggerHandler( 'openTrigger' )（或closeTrigger）element弹出框在哪里一样简单。
回答by marian2js
I extended the popover directive in order to add an attribute "pop-show" which accepts a boolean:
我扩展了 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;
});
I created a Plunker with an example of how to use this directive:
我创建了一个 Plunker，其中包含如何使用此指令的示例：
