javascript - AngularJS bootstrap popover 自定义指令

Question

我使用 bootstrap 自定义弹出窗口创建了一个指令。这可以从用户输入组名，它有两个按钮用于将该值应用于模型并在工具提示上显示该值，还有一个按钮用于关闭弹出窗口。我正在使用 popover java 脚本事件，问题是单个 popover 工作得很好但是当我打开另一个 popover 时，这个 popover 不会自行关闭。在打开一个弹出窗口时需要帮助关闭其他弹出窗口。这是 plnk显示指令。

这是代码

var app = angular.module('myApp',[]);
app.directive('customEditPopover', function () {
        return {
            restrict: 'A',
            template: '<span><i class="fa fa-tags" aria-hidden="true"></i></span>',
            scope: {
                'myModel': '=',
            },
            link: function (scope, el, attrs) {
                scope.label = attrs.popoverLabel;
                var btnsave = '#' + attrs.popoverSave;
                var btncancel = '#' + attrs.popoverCancel;
                var index = attrs.index;
                $(el).tooltip({
                    title: '' + (scope.myModel == undefined) ? "" : scope.myModel,
                    container: 'body',
                    placement: 'top'
                });
                $(el).popover({
                    trigger: 'click',
                    html: true,
                    content: attrs.popoverHtml,
                    placement: attrs.popoverPlacement,
                    container: 'body'
                })
                .on('inserted.bs.popover', function (e) {
                    bindevents();
                    $('#popovertext' + index).val(scope.myModel);
                }).on('hidden.bs.popover', function () {
                    Unbindevents();
                });
                function bindevents() {
                    $(btnsave).bind('click', function () {
                        var text = $('#popovertext' + index).val();
                        scope.myModel = text;
                        $(el).tooltip('hide')
                       .attr('data-original-title', text)
                       .tooltip('fixTitle')
                        toggle();
                    });
                    $(btncancel).bind('click', function () {
                        toggle();
                    });
                }
                function Unbindevents() {
                    $(btnsave).unbind('click');
                    $(btncancel).unbind('click');
                }
                function toggle() {
                    $(el).popover('hide');
                    $(el).click();
                }

            }
        };
    });
app.controller('MyController',['$scope',function($scope){
  $scope.list=[
    {
      name:'ABC'
    },
     {
      name:'DEF'
    },
     {
      name:'GHI'
    },
     {
      name:'KLM'
    }
    ];

}]);

在打开下一个弹出窗口时需要帮助关闭另一个弹出窗口。

Answer 1

您可以在 show.bs.popover 触发时关闭其他弹出窗口，如下所示:Updated Plunkr

$(el).popover({
                trigger: 'click',
                html: true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement,
                container: 'body'
            })
             .on('show.bs.popover', function () {
              var siblings = $(el).parent().parent().siblings();
              siblings.each(function (each){
                $(siblings[each]).find('span').popover('hide');
              });
            });