AngularJS Bootstrap 닫기 버튼 활성화 문제가있는 Popover

Question

안녕하세요 저는 부트 스트랩과 angularjs를 사용하여 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

쿨 실제로 매력적으로 멋진 작품 바보 결론에 도달했다. 각도 -Ui를 사용하지 않고 AngularJS + Bootstrap을위한 솔루션입니다.

<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