个人中心
gpt4 book ai didi

javascript - Angular UI Popover 关闭按钮

转载 作者：行者123 更新时间：2023-11-30 16:38:29 27 4
gpt4 key购买 nike

我读过 Angular UI Bootstrap adding a close button和 show hidden div on ng-click within ng-repeat .我想使用后一篇文章中的解决方案并将其应用于第一篇文章中所述的问题。本质上，我希望能够使用 ng-show 或 ng-click 关闭 Angular UI Bootstrap 弹出窗口。

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

<div ng-class="{'gray-inset-border': style}">
    <div ng-click="style=!style"></div>
</div>

只要单击包含弹出框的元素，就会创建一个弹出框模板。在 Chrome DOM 检查器中，开始标记如下所示:

<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 代码中的任何地方找到 popover 模板。据我所知，弹出窗口的创建是巫毒魔法。

同样令人沮丧的是 Angular UI Bootstrap 还没有这个功能。一个多星期以来，我一直在断断续续地尝试解决这个问题，但我看到的每一个“解决方案”似乎都不适合我。

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

最佳答案

@ognus 在 GitHub thread 上解决了这个问题.

他说:

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我适应测试我自己的问题。解决方案涉及创建一个指令(当然)。

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>

关于javascript - Angular UI Popover 关闭按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32360155/

27 4 0
文章推荐： javascript - onkeypress 上的密码不匹配警报 javascript
文章推荐： c - 包含 .c 文件的副作用
文章推荐： c# - 如何通过 websocket 将音频发送到 Nexmo Voice
文章推荐： javascript - 如何在 jQuery Mask 插件中将特殊字符转换为文字字符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com