Bootstrap con interfaccia utente angolare Popover che aggiunge un pulsante di chiusura

Question

Ho il seguente pop-up e sto provando ad aggiungere un pulsante di chiusura per poterlo chiudere.

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

solo non è sicuro quale evento o funzione da chiamare sul

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

essere in grado di chiudere il popup

Answer 1

imbattuto in questione con questo su un altro progetto con tooltip. Ho finito per seguire alcuni dei modelli in Tooltip.js

Utilizzando $ compilazione e un nuovo ambito figlio è possibile personalizzare questo popup come mai si ritiene opportuno.

.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

Questa direttiva vi permetterà di mostrare un popup basata su un pulsante e poi hanno una funzione di chiusura. Puoi estendere la logica dello spettacolo come mai ritieni opportuno. Ho usato il modulo valido anche con successo in passato.