1

divの外側をクリックすると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

少しフラグがあれば、簡単に達成できます。プランカーを参照してください。

基本的に、選択タグをクリックするとフラグが立てられます。ドキュメントクリックイベントで、フラグが存在するかどうかを確認します。存在する場合は、非表示にせずに返します。次に、フラグをリセットします。

重要な部分:

onDocumentClick = function(event) {

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