AngulatJS를 사용하여 부트 스트랩 popover를 어떻게 사라지나요?

Question

이 바이올린 링크로 부트 스트랩 팝 오버를 사용 중입니다. http://jsfiddle.net/ivankovachev/U4GLT/

팝업이 올 텍스트를 클릭하면 작동합니다. 두 번째 클릭에서 사라집니다 (전환). 괜찮아.

이제 페이지에서 다른 위치를 클릭 할 때 토글 링을 포함한 나의 요구 사항이 사라집니다.

나는 노력하고있다. 제발 저를 도와주세요. 당신은 event.stopPropagation 기능 여기

을 사용할 수 있습니다

customDirectives = angular.module('customDirectives', []); 
customDirectives.directive('customPopover', function() { 
    return { 
     restrict: 'A', 
     template: '<span>{{label}}</span>', 
     link: function (scope, el, attrs) { 
      scope.label = attrs.popoverLabel; 
      $(el).popover({ 
       trigger: 'click', 
       html: true, 
       content: attrs.popoverHtml, 
       placement: attrs.popoverPlacement 
      }); 
     } 
    }; 
}); 

angular.module('CustomComponents', ['customDirectives']); 

Answer 1

는 plunker하고있다 : 예, 그것은 작동하고 http://jsfiddle.net/U4GLT/2681/

customDirectives = angular.module('customDirectives', []); 
customDirectives.directive('customPopover', function() { 
    return { 
     restrict: 'A', 
     template: '<span>{{label}}</span>', 
     link: function(scope, el, attrs) { 
      scope.label = attrs.popoverLabel; 
      $(el).bind('click', function(event) { 
       event.stopPropagation(); 
       $(el).popover({ 
        trigger: 'click', 
        html: true, 
        content: attrs.popoverHtml, 
        placement: attrs.popoverPlacement 
       }); 
      }); 
      $(window).bind('click', function(event) { 
       scope.$apply(function() { 
        $(el).popover('hide'); 
       }); 
      }); 

     } 
    }; 
}); 

angular.module('CustomComponents', ['customDirectives']);