Angular UI Popover 关闭按钮 [英] Angular UI Popover close button

查看：23
本文介绍了Angular UI Popover 关闭按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已阅读 Angular UI Bootstrap 添加关闭按钮 和 在 ng-repeat 中的 ng-click 上显示隐藏的 div.我想使用后一篇文章中的解决方案并将其应用于第一篇文章中所述的问题.本质上，我希望能够使用 ng-show 或 ng-click 关闭 Angular UI Bootstrap 弹出框.

我有一段示例代码来说明这一点.这段代码只是在点击特定元素时将 CSS 类应用于特定元素，并在再次点击时将其删除:

<div ng-click="style=!style"></div>

每当点击一个包含弹出框的元素时，就会创建一个弹出框模板.在 Chrome DOM 检查器中，开始标记如下所示:

<div class="popover ng-isolate-scope 右淡入"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="顶部:317.5px；左侧:541.8125px；显示:块；">

注意 ng-class="{in: isOpen()}".我假设这控制了弹出框是否打开，并希望使用与上面示例中相同的 ng-click 方法，并将其应用于弹出框内的按钮.但是，当我尝试这样做时，它不起作用.我也无法在 ui-bootstrap-tpls.js 代码中的任何地方找到 popover 模板.据我所知，popover 创建是巫毒魔法.

令人沮丧的是，Angular UI Bootstrap 还没有这个功能.我已经尝试断断续续地解决这个问题一个多星期了，我看到的每个解决方案"似乎都不适合我.

我是否正确理解 ng-class="{in: isOpen()}" ?在哪里编辑弹出框模板以添加关闭按钮?

解决方案

@ognus 在 GitHub 线程.

他说:

<块引用>

我发现使用简单的自定义指令最适合我的用例.我只是希望能够从弹出框模板中关闭弹出框.

该指令公开了用户自定义触发器来打开和关闭弹出窗口的 scope.toggle 方法.然后我在 popover 模板中使用这个方法.

有一个 plnkr，我经过改编来测试我自己的问题.解决方案涉及创建指令(当然).

HTML

<html ng-app="main"><头><script data-require="angular.js@1.x";数据-semver =1.4.1"；src=https://code.angularjs.org/1.4.1/angular.js"></script><script data-require="ui-bootstrap@0.13.0";数据-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@*";数据-semver =3.3.1"；rel=样式表"href=//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"；/><script src="popoverToggle.js"></script><script src="script.js"></script><body style="margin: 50px"><!-- 显示弹出框链接-->显示弹出框<div popover-placement="底部"弹出触发器=打开"；popover-template="'popover-template.html'";popover-toggle>显示弹出框2</div></html>

popoverToggle 指令

angular.module('main').config(function($tooltipProvider) {$tooltipProvider.setTriggers({'open': 'close'});}).directive('popoverToggle', function($timeout) {返回 {范围:真实，链接:函数(范围，元素，属性){scope.toggle = function() {$超时(功能(){element.triggerHandler(scope.openned ? 'close' : 'open');scope.openned = !scope.openned;});};return element.on('click', scope.toggle);}};});

弹出框模板

您确定要删除此项目吗?</p><a href='' ng-click='remove(item)'>是</a><div ng-click='toggle()'>否</div>

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.

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>

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;">

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.

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.

Am I understanding the ng-class="{in: isOpen()}" correctly? Where do I edit the popover template to add a close button?

解决方案

This was solved by @ognus on a GitHub thread.

He stated:

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.

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.

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 directive

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

Popover template

<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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆