AngularJS Bootstrap Popover с закрывающей кнопкой активации проблемы

Question

Привет, я успешно создал popover, используя bootstrap и angularjs. Но в то же время я вижу проблему, когда, когда я нажимаю кнопку закрытия, popover приближается (Hide), но в следующий раз, чтобы запустить ее снова, вам нужно дважды щелкнуть ссылку или значок.

Sample Изображение поповера - http://i62.tinypic.com/2uzufkz.png

<a href="#" custom-popover popover-title="Hello">Please click Me !!! </a> 


define(['ngApplication'],function(app){ 

app.directive('customPopover',['$compile',function($compile){ 
     var templateData = "<a> {{tooltiplabel}} </a><button>x</button>"; 

    return { 
     restrict: 'A',  
     transclude: true,      
     template: "<span ng-transclude></span>", 
     link: function(scope,element,attribute,controller){ 

       var compliedData = $compile(templateData)(scope); 

       // Tried with Remove 
       //var getTitle = "<span>"+attribute.popoverTitle+"</span><button id='btnClose' type='button' class='close' onclick='$(&quot;.popover&quot;).prev().removeAttr(&quot;aria-describedby&quot;); $(&quot;.popover&quot;).remove();'>&times;</button>"; 

       // Tried with hide 
       var getTitle = "<span>"+attribute.popoverTitle+"</span><button id='btnClose' type='button' class='close' onclick='$(&quot;.popover&quot;).hide();'>&times;</button>"; 


       var proc = $compile(getTitle)(scope); 

       $(element).popover({ 
        'placement': 'top', 
        'html': true,      
        'title': proc,       
        'content' : compliedData 
       }); 
      } 
     }; 
    }]); 
}); 

Answer 1

Круто после изучения много пришло к выводу, глупому, который на самом деле работает очаровательно удивительным. Вот решение для AngularJS + Bootstrap без использования углового ui.

<a href="#" custom-popover popover-title="Hello">Please click Me !!! </a> 


app.directive('customPopover',['$compile',function($compile){ 

     var popoverBodyData = "<a> {{tooltiplabel}} </a>"; 
     var popoverTitleData = "<span>Description</span> <button type='button' class='close'>&times;</button>"; 

    return { 
     restrict: 'A',  
     //transclude: true, 
     //template: "Description <button id='btnClose' type='button' class='close' onclick='$(&quot;.popover&quot;).hide();'>&times;</button>",   
     //template: "<span ng-transclude></span>", 
     link: function(scope,element,attribute,controller){ 

       scope.tooltiplabel = "Hello Everybody this is PopOver Demo !!!"; 

       var compliedData = $compile(popoverBodyData)(scope); 
       var compliedTitle = $compile(popoverTitleData)(scope); 

       //var getTitle = "<span>"+attribute.popoverTitle+"</span><button id='btnClose' type='button' class='close' onclick='$(&quot;.popover&quot;).prev().removeAttr(&quot;aria-describedby&quot;);$(&quot;.popover&quot;).remove();'>&times;</button>"; 
       var getTitle = "<span>"+attribute.popoverTitle+"</span><button type='button' class='close'>&times;</button>"; 

       var proc = $compile(getTitle)(scope); 


       $(element).popover({ 
        'placement': 'bottom', 
        'html': true,            
        'title': proc,       
        'content' : compliedData 
       }); 

      return $(element).bind('click',function(){ 

       var popoverDiv = $(element).next(); // popover div 
       // getting closeBtn handle inside popover div 
       var closeBtn = $($(popoverDiv).children()[1]).children()[1]; 
       $(closeBtn).bind('click',function(){      
        $(popoverDiv).popover('hide'); 
       }); 
      }); 
     } 

    }; 
    }]); 

все, что я должен сделать, это просто вернуть привязки кликов в функции ссылок.

Я добавил многоразовый поповер/подсказке код директивы на GitHub с расширенной функцией - https://github.com/keyurpatel/angularjs-bootstrap-popover