Как удалить Bootstrap popover с помощью AngulatJS?

Question

Я использую bootstrap popover этой ссылкой на скрипку http://jsfiddle.net/ivankovachev/U4GLT/

Он работает, когда я нажимаю текст, по которому идет popover. во втором щелчке исчезает (переключается). все нормально.

Теперь мое требование, включая переключение при нажатии любого другого места на странице, затем всплывающее окно должно исчезнуть.

Я стараюсь. Пожалуйста, помогите мне сделать это.

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']);