Question

我正在尝试在按钮内创建一个下拉列表-单击该按钮时，下拉列表应打开。我正在尝试通过单击外部隐藏列表。下拉菜单实际上是在外部单击时关闭的，但是在列表上单击时也会关闭-这是不希望的。在列表内部单击时，如何保持列表打开？ stopPropagation对我来说不是一个好的解决方案，因为它破坏了click事件的预期流程。感谢您的帮助。

http://next.plnkr.co/edit/1HousD8KytGept0o

Answer 1

我不知道您为什么创建了这么多指令来处理此任务。我已编辑您项目的“ onClickOutside”指令，以实现您的要求。请参考以下示例。

app.directive('onClickOutside', ['$document', "$parse", function ($document, $parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attr, controller) {

      function isDescendant(parent, child) {
        var node = child.parentNode;
        while (node != null) {
          if (node == parent) {
            return true;
          }
          node = node.parentNode;
        }
        return false;
      }

      var anyOtherClickFunction = $parse(attr["onClickOutside"]);
      var documentClickHandler = function (event) {
        var isChild = element[0] && isDescendant(element[0], event.target);
        var showList = true; 
        if (!isChild) {
          if (element[0] == event.target) showList = true;
          else showList = false; 
        }
        scope.$apply(function () {
            scope.showList = showList;
          });
      };

      $document.on("contextmenu", documentClickHandler);
      $document.on("click", documentClickHandler);
      scope.$on("$destroy", function () {
        $document.off("contextmenu", documentClickHandler);
        $document.off("click", documentClickHandler);
      });
    }
  };
}]);

AngularJS外部事件在子指令中不起作用

1 个答案: