单击外部编辑器时，Angular js Summernote 下拉菜单未关闭

Posted 2023-03-22

【中文标题】单击外部编辑器时，Angular js Summernote 下拉菜单未关闭

【英文标题】：Angular js Summernote dropdown not closing when clicked outside editor

【发布时间】：2018-09-21 18:40:19

【问题描述】：

我正在使用带有 angularJS 的 Summernote。问题是当我在summernote 编辑器中打开下拉菜单并且没有选择任何选项并单击页面中的其他位置时，我仍然可以看到下拉菜单。我希望在编辑器外部单击后立即隐藏下拉菜单。我如何做到这一点？

我的html代码是。

<summernote id="summernoteId" config="options" ng-model="x.responseTitle" placeholder="Enter title"/>

【参考方案1】：

试试这个，使用指令关闭 Summernote 下拉菜单。

angular.module('clickOutside', [])

.directive('clickOutside', [ '$parse', '$timeout', function($parse, $timeout) 
        return 
          link: function (scope, element, attrs) 
            function handler(event) 
              if(!$(event.target).closest(element).length) 
                scope.$apply(function () 
                  $parse(attrs.clickOutside)(scope);
                );
              
            

            $timeout(function () 
              // Timeout is to prevent the click handler from immediately
              // firing upon opening the Summernote.
              $(document).on("click", handler);
            );
            scope.$on("$destroy", function () 
              $(document).off("click", handler);
            );
          
        
    ]); 

在 DOM 中包含 clickOutside 作为指令：

<summernote clickOutside id="summernoteId" config="options" ng-model="x.responseTitle" placeholder="Enter title"/>  

【参考方案2】：

感谢 Anil 的回复，但不知何故它不起作用。我做了一个非常糟糕的黑客来隐藏如下。欢迎提出任何建议。

$scope.formClicked = function()
     
        var list = document.getElementsByClassName("note-hint-item");
        if(list.length > 0)
          $(".note-hint-popover").attr("style", "display:none");