Question

我正在使用带有angularJS的summernote。问题是当我在summernote编辑器中打开下拉列表而没有选择任何选项，然后单击页面中的其他位置我仍然会看到下拉列表。我想在编辑器外单击后立即隐藏下拉列表。我如何实现这一目标？

我的HTML代码是。

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

Answer 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"/>

Answer 2

感谢Anil的回复，但不知怎的，它没有用。我做了一个非常糟糕的黑客隐藏如下。欢迎任何建议。

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

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

2 个答案: