Angular UI Bootstrap Popover 添加关闭按钮 [英] Angular UI Bootstrap Popover adding a close button

问题描述

我有以下弹出窗口，并尝试添加关闭按钮以将其关闭.

.directive("popoverHtmlUnsafePopup", function () {'使用严格';返回 {限制:EA"，替换:真的，范围:{ 标题:@"，内容:@"，位置:@"，动画:&"，isOpen:&"，手册隐藏:&"},templateUrl: "views/popover/popover-html-unsafe-popup.html"};}).directive("popoverHtmlUnsafe", [ '$compile', '$timeout', '$parse', '$window',"$tooltip", function ($compile, $timeout, $parse, $window, $tooltip){'使用严格';return $tooltip("popoverHtmlUnsafe", "popover", "click");}]);<div class="popover {{placement}}" ng-class="{ in:isOpen(),fade: animation() }"><div class="箭头"></div><div class="popover-inner"><h3 class="popover-title" ng-bind="title" ng-show="title"></h3><div class="popover-content" bind-html-unsafe="content">

<button type="button" class="close" popover-trigger="close">&times;</button>

只是不确定要调用什么事件或函数

<button type="button" class="close" popover-trigger="close">&times;</button>

能够关闭弹出窗口

解决方案

在使用工具提示的另一个项目上遇到了这个问题.我最终遵循了 Tooltip.js<中的一些模式/a>

通过使用 $compile 和一个新的子作用域，您可以根据自己的需要自定义此弹出窗口.

.directive('popover2',['$parse', '$compile','$log','$templateCache','$position',函数 ($parse,$compile,$log,$templateCache,$position) {功能链接(范围，元素，属性){var popupScope = scope.$new(false);var html = $templateCache.get('views/popover/popover-html-unsafe-popup.html').trim();var 模板 = angular.element(html)var popupLinkFn = $compile(template);var popup = popupLinkFn(popupScope);popupScope.isOpen = false;popupScope.content = attrs['popover2'];变量位置 = 函数(){var ttPosition = $position.positionElements(element, popup, scope.placement, false);ttPosition.top += 'px';ttPosition.left +='px';popup.css(ttPosition);};popupScope.setOpen = function(val) {popupScope.isOpen = val;popup.css({display: popupScope.isOpen ? 'block' :'none' });位置();//调用两次，同tooltip.js位置();};var cleanup = element.on('click',function(event){popupScope.setOpen(!popupScope.isOpen);});element.after(popup);element.on('$destroy',cleanup);}返回 {替换:假，链接:链接，范围:{标题:@"，位置:@"，}，};}]);

JSFiddle

此指令将允许您显示基于按钮的弹出窗口，然后具有关闭功能.您可以按照自己认为合适的方式扩展显示逻辑.我过去也成功使用过有效的表单.

I have the following pop-up and trying to add a close button to be able to close it.

.directive("popoverHtmlUnsafePopup", function () {
  'use strict';
  return {
    restrict: "EA",
    replace: true,
    scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&", manualHide: '&' },
    templateUrl: "views/popover/popover-html-unsafe-popup.html"
  };
})

.directive("popoverHtmlUnsafe", [ '$compile', '$timeout', '$parse', '$window',"$tooltip", function ($compile, $timeout, $parse, $window, $tooltip) {
  'use strict';
  return $tooltip("popoverHtmlUnsafe", "popover", "click");
}]);

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
    <div class="popover-content" bind-html-unsafe="content">
    </div>
    <button type="button" class="close" popover-trigger="close">&times;</button>
  </div>
</div>

Just not sure what event or function to call on

<button type="button" class="close" popover-trigger="close">&times;</button>

to be able to close the popup

解决方案

Ran into issue with this on another project using tooltip. I ended up following some of the patterns in Tooltip.js

By using $compile and a new child scope you can customize this popup how ever you see fit.

.directive('popover2',['$parse', '$compile','$log','$templateCache','$position',
    function ($parse,$compile,$log,$templateCache,$position ) {
         function link(scope, element, attrs) {
             var popupScope = scope.$new(false);   
             var html = $templateCache.get('views/popover/popover-html-unsafe-popup.html').trim();
             var template = angular.element(html)

             var popupLinkFn = $compile(template);

             var popup = popupLinkFn(popupScope);

             popupScope.isOpen = false;             
             popupScope.content = attrs['popover2'];
             var position = function(){
                 var ttPosition = $position.positionElements(element, popup, scope.placement, false);
                 ttPosition.top += 'px';
                 ttPosition.left +='px';
                 popup.css(ttPosition);
             };
             popupScope.setOpen = function(val) {                 

                 popupScope.isOpen = val;
                 popup.css({display: popupScope.isOpen ? 'block' :'none' });       
                 position();
                 // call twice, same as tooltip.js
                 position();

             };            

             var cleanup = element.on('click',function(event){   
                popupScope.setOpen(!popupScope.isOpen);
             });

             element.after(popup);
             element.on('$destroy',cleanup);

         }
        return {
            replace:false,            
            link:link,
            scope: {title: "@", placement: "@",},
        }; 
    }
 ]);

JSFiddle

This directive will allow you to show a popup based on a button and then have a close function. You can extend the show logic how ever you see fit. I have used form valid successfully in the past also.

这篇关于Angular UI Bootstrap Popover 添加关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！