Angular UI Bootstrap Popover dodając przycisk zamknięcia

Question

Mam następujące okno pop-up i próbuję dodać przycisk zamykania, aby móc go zamknąć.

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

Tylko nie wiem, co zdarzenie lub czynność, aby zadzwonić na

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

aby móc zamknąć okienko

Answer 1

wpadł problemu z tym na innym projekcie z wykorzystaniem podpowiedzi. Skończyło się na niektórych wzorców w Tooltip.js

Korzystając z $ compile i nowy zakres podrzędny można dostosować to wyskakujące okienko, jak widać, pasuje.

.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

Dyrektywa ta pozwoli Ci pokazać okienko opartą na przycisku, a następnie mają ścisły funkcję. Możesz rozszerzyć logikę show, jakkolwiek byś nie pasował. Użyłem formularza ważnego z powodzeniem również w przeszłości.