Clever Geek Handbook

AngularJS Bootstrap Popover with closed activation button

Hi I have successfully created a popover using bootstrap and angularjs. But at the same time I see an issue where when I click the close button the popover comes close (Hide), but next time to start it again you need to double click the link or icon.

Sample PopOver Image - 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
                });   
           }
      };
   }]); 
});
+3


source to share


1 answer


Cool after researching a lot came to stupid conclusions that actually work wonderfully adorable. Here is a solution for AngularJS + Bootstrap without using angular-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');
               });
             });
       }

   };
  }]);


all i have to do is just return the click anchors in the link function.

I have added reusable popup / tooltip directive code on github with advanced feature - https://github.com/keyurpatel/angularjs-bootstrap-popover

0


source






More articles:


All Articles