Question

我需要在外面点击隐藏div。所以，我创建了一个处理它的指令（检查目标元素是否是一个子元素。如果是，它不会隐藏div或者它隐藏div）。当我们从typeahead下拉列表中选择一些选项时，它会失败（使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>

Answer 1

有了一些标志，很容易实现。请参阅plunker。

基本上，当您点击选择标记时，您会放置一个标记。在文档单击事件中，检查标志是否存在。如果存在，则返回时不隐藏。然后重置标志。

重要的部分：

{{1}}

Answer 2

Jquery 解决方案：

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

当您在该 div 之外单击时，只需为要关闭的每个元素添加一个“closeclass”。在本例中，我在右侧添加了一张幻灯片，但您可以删除或使用不同的效果。

在外面点击时隐藏div

2 个答案: