1

我需要在点击它外部时隐藏一个 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>
4

2 回答 2

3

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

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

重要的部分：

onDocumentClick = function(event) {

   // check for flag
   if(!$scope.closeFlag) {
      $scope.closeFlag = true;
      return;
   }
   // code to hide the div
}
于 2015-10-01T18:12:44.303 回答
0

jQuery解决方案：

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

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

于 2021-04-05T20:12:35.903 回答