制作一个 div 以隐藏它之外的点击答案

【问题标题】：Make a div to hide on click of outside it制作一个 div 以隐藏它之外的点击
【发布时间】：2015-10-01 17:28:00
【问题描述】：

我需要在点击外部的 div 时隐藏它。所以，我创建了一个处理它的指令（检查目标元素是否是子元素。如果是，它不会隐藏 div 或隐藏 div）。当我们从预先输入的下拉菜单中选择某个选项时，它失败了（使 div 隐藏）。有什么帮助吗？

http://plnkr.co/edit/hP740WSct8BuZLm8K1K9?p=preview

指令：

app.directive("outsideClick", ['$document', '$parse', function($document, $parse) {
  return {
    link: function($scope, $element, $attributes) {
      var scopeExpression = $attributes.outsideClick,
        onDocumentClick = function(event) {
          var parent = event.target;

          while (parent && parent !== $element[0]) {
            parent = parent.parentNode;
          }

          if (!parent) {
            $scope.$apply(scopeExpression);
          }
        }

      $document.on("click", onDocumentClick);

      $element.on('$destroy', function() {
        $document.off("click", onDocumentClick);
      });
    }
  }
}]);

HTML：

  <div ng-show="status" outside-click="hideDiv();">
    <h3>Div to be made hidden</h3>
    <p>Selected: {{address.selected.formatted_address}}</p>
    <ui-select ng-model="address.selected" theme="bootstrap" ng-disabled="disabled" reset-search-input="false" style="width: 300px;">
      <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
      <ui-select-choices repeat="address in addresses track by $index" refresh="refreshAddresses($select.search)" refresh-delay="0">
        <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>
  </div>

【问题讨论】：

标签： angularjs angularjs-directive hide angular-ui-select

【解决方案1】：

使用一些标志，很容易实现。见plunker。

基本上，您在单击选择标签时放置一个标志。在文档单击事件中，您检查标志是否存在。如果它存在，您将返回而不隐藏。然后你重置标志。

重要的部分：

onDocumentClick = function(event) {

   // check for flag
   if(!$scope.closeFlag) {
      $scope.closeFlag = true;
      return;
   }
   // code to hide the div
}

【讨论】：

感谢您的帮助。你能解释为什么它不起作用吗？我没有得到确切的原因。
在我看来，您正试图通过以下代码行来防止隐藏： if (!parent) { $scope.$apply(scopeExpression); }，但是通过阻止 $scope.$apply() 只会延迟摘要周期的出现，并不能阻止它的发生。

【解决方案2】：

jquery解决方案：

$(document).mouseup(function (e) {
    !$(e.target).closest('.closeClass').length
    &&
    $(".closeClass").hide("slide", { direction: "right" }, 500);
});

当您在该 div 之外单击时，只需为要关闭的每个元素添加一个“closeclass”。在这种情况下，我在右侧添加了一张幻灯片，但您可以删除或使用其他效果。

【讨论】：