創建一個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來隱藏點擊外部它

回答

相關問題