कोणीय यूआई बूटस्ट्रैप पॉपओवर एक करीबी बटन जोड़ना

Question

मेरे पास निम्न पॉप-अप है और इसे बंद करने में सक्षम होने के लिए एक बंद बटन जोड़ने का प्रयास कर रहा है।

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

पर कॉल करने के लिए पॉपअप

Answer 1

टूलटिप का उपयोग कर अन्य परियोजना पर इस के साथ इस मुद्दे में Ran बंद करने के लिए सक्षम होने के लिए। Tooltip.js

$ संकलन और एक नए बच्चे के दायरे का उपयोग करके आप इस पॉपअप को अनुकूलित कर सकते हैं कि आप कभी भी फिट कैसे देखते हैं।

.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

यह निर्देश आप एक बटन के आधार पर एक पॉपअप दिखाई दे और उसके बाद एक करीबी समारोह के लिए अनुमति देगा। आप शो लॉजिक का विस्तार कर सकते हैं कि आप कभी भी फिट कैसे देखते हैं। मैंने पहले भी अतीत में सफलतापूर्वक फॉर्म का उपयोग किया है।