Question

您好我已经使用bootstrap和angularjs成功创建了一个popover。但同时我看到一个问题，当我点击关闭按钮时，弹出窗口关闭（隐藏），但下次再次启动它时，你必须在链接或图标上单击两次。

PopOver的示例图片 - 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的解决方案，不使用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');
               });
             });
       }

   };
  }]);

我所要做的只是返回链接功能中的点击绑定。

我在github上添加了一个可重复使用的popover / tooltip指令代码，其中包含高级功能 - https://github.com/keyurpatel/angularjs-bootstrap-popover

AngularJS Bootstrap Popover具有关闭按钮激活问题

1 个答案: