Angular UI Bootstrap Popover Hinzufügen einer Schließen-Schaltfläche

Question

Ich habe das folgende Pop-up und versuchen, eine Schließen-Schaltfläche hinzufügen, um es zu schließen.

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

einfach nicht sicher, welches Ereignis oder Funktion auf

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

aufrufen zu können, um das Popup-

Answer 1

Lief in Problem mit diesem an einem anderen Projekt mit Tooltip schließen. Ich folgte einige der Muster in Tooltip.js

Mit $ Kompilieren und einem neuen Kind Bereich können Sie dieses Popup anpassen, wie immer Sie für richtig halten.

.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

werden Diese Richtlinie ermöglicht es Ihnen, ein Pop-up auf eine Schaltfläche basierend zu zeigen und dann eine enge Funktion haben. Sie können die Show-Logik erweitern, wie immer Sie es für richtig halten. Ich habe die Form auch in der Vergangenheit erfolgreich angewendet.