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

前端之家收集整理的这篇文章主要介绍了angularjs – Angular UI Bootstrap Popover添加关闭按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下弹出窗口并尝试添加关闭按钮以便能够关闭它.
.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

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

原文链接:https://www.f2er.com/angularjs/142112.html

猜你在找的Angularjs相关文章