Góc giao diện người dùng Bootstrap Popover thêm nút đóng

Question

Tôi có cửa sổ bật lên sau đây và cố thêm nút đóng để có thể đóng.

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

Chỉ cần không chắc chắn những gì sự kiện hoặc chức năng để kêu gọi

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

để có thể đóng popup

Answer 1

Ran vào vấn đề với điều này trên một dự án khác sử dụng tooltip. Tôi đã kết thúc theo một số mẫu trong Tooltip.js

Bằng cách sử dụng $ compile và phạm vi con mới, bạn có thể tùy chỉnh cửa sổ bật lên này như thế nào bạn thấy phù hợp.

.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

Chỉ thị này sẽ cho phép bạn hiển thị một popup dựa vào một nút và sau đó có một hàm gần. Bạn có thể mở rộng logic hiển thị như thế nào bao giờ bạn thấy phù hợp. Tôi đã sử dụng mẫu hợp lệ thành công trong quá khứ.