Question

我正在通过这个小提琴链接http://jsfiddle.net/ivankovachev/U4GLT/

使用bootstrap popover

当我点击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']);

如何使用AngulatJS消失Bootstrap popover？

1 个答案: