Question

我使用bootstrap自定义弹出窗口创建了一个指令。这样可以从用户那里获取组名称的输入，并且有两个按钮用于将该值应用于建模并在工具提示上显示该值以及用于关闭弹出窗口的按钮。我正在使用popover java脚本事件，问题是单个popover工作正常，但是当我打开另一个时，这个popover不关闭自己。当一个人打开时，需要帮助关闭其他popovers。这是显示指令的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'
    }
    ];

}]);

在打开下一个popover时需要帮助关闭其他popover。

Answer 1

您可以在触发$(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'); }); });时关闭其他弹出窗口，如下所示：Updated Plunkr

if (Checkbox1.Checked)

Answer 2

IMO，最模块化的方式是使用服务来跟踪所有打开的PopUps。

这带来了多重好处。

您可以扩展服务以跟踪不同类型的弹出窗口，允许您关闭所有或打开所有或执行任何您需要的操作
它从跟踪弹出窗口的控件和指令中删除逻辑。因此，他们可以专注于一个特定的事情。您还可以在页面上运行多个控制器和弹出窗口，允许每个控制器/弹出窗口是一个独立的工作单元，而不必担心其他控制器/弹出窗口会踩到它们的项目。

这样做的缺点

正如我之前评论过的那样，您可以使用 angular bootstrap directives。使您的代码“更清洁”，因为所有这些都是为您完成的。没有为你做的是关闭所有活动的弹出窗口。您可以采用我使用的相同服务方法，只需将其插入ng-bootstrap指令。
当您点击8次以上时，绑定/取消绑定JQUERY事件似乎没有响应。我没有答案为什么会这样，但使用服务跟踪的整体想法仍然是有效的。

您可以将此代码剪切并粘贴到plnkr或开发框中，它可以正常工作。

// Code goes here
var app = angular.module('myApp',[]);

app.factory('popUpService', function() {
  var activePopups = [];
  // factory function body that constructs shinyNewServiceInstance

  return {
  AddPopup : function(el)
  {
  activePopups.push(el);
  },
  CloseAllPopups : function(closeFunction){
  for (var i = 0; i < activePopups.length; i++)
  { 
           closeFunction(activePopups[i])

  }
  }
  }

});
app.directive('customEditPopover',['popUpService', function (popUpService) {
        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() {

                CloseAll();

                popUpService.AddPopup($(el));

                    $(btnsave).bind('click', function () {
                        var text = $('#popovertext' + index).val();
                        scope.myModel = text;
                        $(el).tooltip('hide')
                       .attr('data-original-title', text)
                       .tooltip('fixTitle')
                    closeCurrent();
                    });
                    $(btncancel).bind('click', function () {
                    closeCurrent();
                    });
                }
                function Unbindevents() {
                    $(btnsave).unbind('click');
                    $(btncancel).unbind('click');
                }
                function closeCurrent(){
                   $(el).popover('hide');
                 //   $(el).click();
                }
                function CloseAll() {

                popUpService.CloseAllPopups(function(popup){ 

                   popup.popover('hide');
                //    popup.click();
              });

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

}]);

AngularJS bootstrap popover自定义指令

2 个答案: