制作一个 div 以在单击外部时隐藏

Question

我需要在点击外部时隐藏 div。因此，我创建了一个处理它的指令（检查目标元素是否为子元素。如果是，它不会隐藏 div 否则它会隐藏 div）。当我们 select 从预先输入的下拉列表中选择某些选项时，它失败了（使 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。

基本上，您在单击 select 标签时放置了一个标志。在文档单击事件中，您检查标志是否存在。如果它存在你 return 没有隐藏。然后你重置标志。

重要部分：

onDocumentClick = function(event) {

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

Answer 2

Jquery 解决方案：

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

只需将 'closeclass' 添加到每个要在单击 div 外部时关闭的元素。在这种情况下，我在右侧添加了一个幻灯片，但您可以删除或使用不同的效果。

制作一个 div 以在单击外部时隐藏

Make a div to hide on click of outside it

hide

angularjs

angularjs-directive

angular-ui-select