创建一个div来隐藏点击外部它

我需要在点击外部隐藏div。所以，我创建了一个处理它的指令（检查目标元素是否是一个孩子，如果是的话，它不会隐藏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>

来源

2015-10-01 SaiGiridhar

随着位标志，很容易实现。见plunker。

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

的重要组成部分：

onDocumentClick = function(event) { 

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

来源

2015-10-01 18:12:44 zszep

感谢您的帮助。你能解释它为什么不起作用吗？我没有得到确切的原因。 – SaiGiridhar

正如我所看到的，您试图防止用这些代码行隐藏：if（！parent）{scope}。$ apply（scopeExpression）; }，但通过阻止$ scope。$ apply（）只会延迟出现的摘要循环，但并不妨碍它发生。 – zszep

创建一个div来隐藏点击外部它

回答

相关问题