Angular UI Popover关闭按钮 [英] Angular UI Popover close button
问题描述
我已阅读 Angular UI Bootstrap添加关闭按钮和在ng-repeat中的ng-click上显示隐藏的div .我想使用后一篇文章中的解决方案，并将其应用于第一篇文章中所述的问题.本质上，我希望能够使用ng-show或ng-click关闭Angular UI Bootstrap弹出窗口.
I've read Angular UI Bootstrap adding a close button and show hidden div on ng-click within ng-repeat. I'd like to use the solution from the latter article and apply it to the problem stated in the first article. In essence, I want to be able to close an Angular UI Bootstrap popover with ng-show or ng-click.
我有一个示例代码来说明这一点.此代码仅在每次单击时将CSS类应用于特定元素，然后在再次单击时将其删除:
I have an example piece of code to illustrate this. This code just applies a CSS class to a particular element whenever it is clicked, and removes it when it is clicked again:
<div ng-class="{'gray-inset-border': style}">
<div ng-click="style=!style"></div>
</div>
每当单击包含弹出框的元素时，都会创建一个弹出框模板.在Chrome DOM检查器中，开始标记如下所示:
Whenever an element containing a popover is clicked, a popover template is created. In the Chrome DOM inspector, the opening tag looks like this:
<div class="popover ng-isolate-scope right fade in"
tooltip-animation-class="fade" tooltip-classes=""
ng-class="{ in: isOpen() }" popover-template-popup="" title=""
content-exp="contentExp()" placement="right" popup-class="" animation="animation"
is-open="isOpen" origin-scope="origScope"
style="top: 317.5px; left: 541.8125px; display: block;">
注意ng-class="{in: isOpen()}".我假设这控制着是否打开弹出窗口，并且想要使用与上例相同的ng-click方法，并将其应用于弹出窗口中的按钮.但是，当我尝试这样做时，它不起作用.我也无法在ui-bootstrap-tpls.js代码中的任何地方找到弹出式模板.据我所知，弹出框的创建是巫术魔术.
Notice the ng-class="{in: isOpen()}". I am assuming that this controls whether the popover is open or not, and want to use the same ng-click method as in the example above, and apply it to a button within the popover. However, when I tried that, it didn't work. I also can't find the popover template anywhere in the ui-bootstrap-tpls.js code. As far as I know, popover creation is voodoo magic.
令人沮丧的是，Angular UI Bootstrap还没有此功能.我一直在尝试解决这个问题超过一个星期，而我所看到的每个解决方案"似乎都不适合我.
It's also frustrating that Angular UI Bootstrap doesn't have this functionality already. I've been trying to solve this problem off and on for over a week now, and every "solution" I have seen doesn't seem to work for me.
我正确理解了ng-class="{in: isOpen()}"吗?我在哪里编辑弹出框模板以添加关闭按钮?
Am I understanding the ng-class="{in: isOpen()}" correctly? Where do I edit the popover template to add a close button?
推荐答案
@ognus在 GitHub线程.
他说:
我发现使用简单的自定义指令最适合我的用例.我只希望能够从弹出框模板中关闭弹出框.
I've found that using a simple custom directive worked best for my use case. I just want to be able to close the popover from within the popover template.
该指令公开了scope.toggle方法，该方法由用户自定义触发以打开和关闭弹出窗口.然后，我在弹出模板中使用此方法.
The directive exposes scope.toggle method that user custom trigger to open and close popover. I'm then using this method in the popover template.
我有一个plnkr 可以用来测试自己的问题.解决方案包括创建指令(当然).
There is a plnkr that I adapted to test my own issue. The solution involved creating a directive (of course).
HTML
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js@1.x" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="popoverToggle.js"></script>
<script src="script.js"></script>
</head>
<body style="margin: 50px">
<!-- Show popover link -->
<a
href=""
popover-placement="bottom"
popover-trigger="open"
popover="Lorem ipsum dolor sit amet, consectetur."
popover-title="This is a title"
popover-toggle>
Show popover</a>
<div popover-placement="bottom" popover-trigger="open"
popover-template="'popover-template.html'" popover-toggle>Show Popover 2</div>
</body>
</html>
popoverToggle指令
angular.module('main')
.config(function($tooltipProvider) {
$tooltipProvider.setTriggers({'open': 'close'});
})
.directive('popoverToggle', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.toggle = function() {
$timeout(function() {
element.triggerHandler(scope.openned ? 'close' : 'open');
scope.openned = !scope.openned;
});
};
return element.on('click', scope.toggle);
}
};
});
弹出式模板
<p>Are you sure you want to remove this item?</p>
<a href='' ng-click='remove(item)'>Yes</a>
<div ng-click='toggle()'>No</div>
这篇关于Angular UI Popover关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
