如何使用AngulatJS消除Bootstrap popover？

Question

我使用的引导酥料饼通过此链接小提琴http://jsfiddle.net/ivankovachev/U4GLT/

它的工作，当我点击酥料饼快到文本。在第二次点击它正在消失（切换）。没关系。

现在，我的要求包括切换，当我点击页面中的任何其他地方，然后弹出应该消失。

我在努力。请帮我做到这一点。

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

可以使用event.stopPropagation功能

这里工作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']);