angularjs – Angular UI Bootstrap Popover添加关闭按钮

发布时间：2020-12-17 07:28:41 所属栏目：安全来源：网络整理

导读：我有以下弹出窗口并尝试添加关闭按钮以便能够关闭它. .directive("popoverHtmlUnsafePopup",function () { 'use strict'; return { restrict: "EA",replace: true,scope: { title: "@",content: "@",placement: "@",animation: "",isOpen: "",manualHide: ''

我有以下弹出窗口并尝试添加关闭按钮以便能够关闭它.

.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>

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

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

能够关闭弹出窗口

使用工具提示在另一个项目中遇到此问题.我最终在 Tooltip.js中遵循了一些模式

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

.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: "@",},}; 
    }
 ]);

JSFiddle

该指令允许您显示基于按钮的弹出窗口,然后具有关闭功能.您可以根据自己的需要扩展节目逻辑.我过去也使用过有效的表格.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!