web-dev-qa-db-ja.com

Angular UI Bootstrapの外側をクリックしてポップオーバーを隠す

bootstrapポップオーバーを手動で閉じて、ポップオーバーではないdocumentまたはbodyの任意の場所をクリックしたときに閉じるようにしています。

これを達成するために私が見つけた最も近いものは、ディレクティブを作成することです（ この答えを見つけました ）が、これは変数がtrueまたはfalse。

ポップオーバーではないものをクリックすると、誰がそれを閉じる方法を見つけるのを手伝ってもらえますか？

JQuery $(document).click(function(e){});を使用しても構いません。クロースを呼び出す方法がわかりません。

<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

通常、popover-trigger="focus"でうまくいきますが、ポップオーバーにはクリックする必要があるコンテンツが含まれています。 focusトリガーを使用すると無視されるng-clickがポップオーバー内にあるため、あまり慣習的な方法を探していますそれを回避するために。

javascriptangularjstwitter-bootstrapangular-ui-bootstrap
45
bryan

編集済み：

Plunker Demo

これがどのように機能するかを示します（まだ長くて徹底的な説明）

  1. トリガー要素をターゲットにできるカスタムディレクティブを作成します。
  2. 本文に追加されるカスタムディレクティブを作成し、トリガー要素を見つけて、クリックされたときにカスタムイベントを発生させます。

トリガー要素を対象とするカスタムディレクティブを作成します。

ポップオーバーを開いた要素からカスタムイベントハンドラーをトリガーする必要があります（デモではボタンです）。課題は、ポップオーバーがこの要素に兄弟として追加されることであり、DOMを走査して特定の構造を持つことを期待している場合、物事が壊れる可能性が大きいと常に考えています。トリガー要素をターゲットにできる方法はいくつかありますが、私のアプローチは、クリックしたときに要素に一意のクラス名を追加することです（「トリガー」を選択します）。このシナリオでは、一度に開くことができるポップオーバーは1つだけなので、クラス名を使用しても安全ですが、好みに合わせて変更できます。

カスタムディレクティブ

app.directive('popoverElem', function(){
  return{
    link: function(scope, element, attrs) {
      element.on('click', function(){
        element.addClass('trigger');
      });
    }
  }
});

ボタンに適用

<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>

ドキュメントボディ（またはその他の要素）のカスタムディレクティブを作成して、ポップオーバークローズをトリガーします。

最後の部分は、トリガー要素を見つけ、適用される要素がクリックされたときにポップオーバーを閉じるカスタムイベントを発生させるカスタムディレクティブを作成することです。もちろん、最初のクリックイベントを「トリガー」要素から除外し、ポップオーバーの内部でやり取りしたい要素を除外する必要があります。したがって、exclude-classという属性を追加して、クリックイベントを無視する（ポップオーバーが閉じないようにする）要素に追加できるクラスを定義できるようにしました。

物事を整理するために、イベントハンドラーがトリガーされたときに、トリガー要素に追加されたトリガークラスを削除します。

app.directive('popoverClose', function($timeout){
  return{
    scope: {
      excludeClass: '@'
    },
    link: function(scope, element, attrs) {
      var trigger = document.getElementsByClassName('trigger');

      function closeTrigger(i) {
        $timeout(function(){ 
          angular.element(trigger[0]).triggerHandler('click').removeClass('trigger'); 
        });
      }

      element.on('click', function(event){
        var etarget = angular.element(event.target);
        var tlength = trigger.length;
        if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
          for(var i=0; i<tlength; i++) {
            closeTrigger(i)
          }
        }
      });
    }
  };
});

これをbodyタグに追加して、ページ全体がポップオーバーの却下可能な背景として機能するようにしました。

<body popover-close exclude-class="exclude">

そして、ポップオーバーの入力にexcludeクラスを追加しました：

<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">

そのため、いくつかの調整と落とし穴がありますが、それはあなたにお任せします。

  1. 定義されていない場合、popover-closeディレクティブのリンク関数でデフォルトの除外クラスを設定する必要があります。
  2. Popover-closeディレクティブは要素にバインドされていることに注意する必要があります。したがって、html要素とbody要素に設定したスタイルを削除して高さを100％にすると、コンテンツがビューポート内に「デッドエリア」を持つ可能性がありますそれを埋めません。

Chrome、Firefox、およびSafariでテスト済み。

23
jme11

UPDATE：1.0リリースでは、outsideClickという新しいトリガーが追加され、ユーザーがポップオーバーまたはツールチップの外側をクリックすると、ポップオーバーまたはツールチップが自動的に閉じます。

0.14.0リリース以降、tooltip-is-openまたはpopover-is-open属性を使用して、ツールチップ/ポップオーバーの開閉をプログラムで制御する機能が追加されました。

42
icfantv

Angular UI Bootstrap 1.0.0以降、ツールチップとポップオーバー用の新しいoutsideClickトリガーがあります（ this pull request で導入されました。Angular UI Bootstrap 2.0.0、popover-triggerはangular式を使用するように変更されました（ Changelog ）値は引用符で囲む必要があります。このコードは、angular-uiの現在のバージョンで動作します。

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>

このコードは、古いバージョンのAngular UI Bootstrap（2.0.0以前）で動作します：

<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
    popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
28
cdauth

プロパティfocusを割り当てることができるpopover-triggerというプロパティがあります。

<button 
      popover-placement="right" 
      popover="On the Right!" 
      popover-trigger="focus" 
      class="btn btn-default">
   Right
</button>

これはトリックです！ :)

編集：ツールチップをクリックしてフォーカスが失われないようにするには、アプローチを検討してください これと同様

角度で動作させる場合は、独自のトリガー定義を作成してみてください。それを行う方法に関する提案は こちらにあります です。

13
Patrick Motard

popover-trigger="'outsideClick'"これは完全に機能します。

popover-trigger="outsideClick"これはしません。

なぜうまくいかなかったのかを整理するのに1日かかりました。

これは、彼らがこのコード"if (trigger === 'outsideClick')"を使用してこれをチェックするためです。

12
ajin

あなたが探しているのは

<button
      popover-trigger="outsideClick" 
      class="btn btn-default">
   Right
</button>

ドキュメントから-outsideClickトリガーにより、ポップオーバーがクリック時に切り替わり、他の何かがクリックされたときに非表示になります。

6
Ratheesh Naithalath

次を使用できます。

マークアップ

<div ng-app="Module">
    <div ng-controller="formController">
        <button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus" 
          popover-placement="left" type="button" class="btn btn-default">
             Popover With Template
        </button>

        <script type="text/ng-template" id="myPopoverTemplate.html">
            <div>
                <span>prasad!!</span>
            </div>
        </script>
    </div>
</div>

Javascript

<script type="text/javascript">
    var app = angular.module("Module", ['ui.bootstrap']);
    app.controller("formController", ['$scope', function($scope) {
        $scope.dynamicPopover = {
            templateUrl: 'myPopoverTemplate.html'
        };
    }]);
</script>
4
Prasad Shigwan

同じ問題があり、popover-trigger="'outsideClick'"が機能しました。興味深いことに、ドキュメントにはこの問題が記載されていませんでした。

2
Jake Scott

'$ uibTooltipProvider'の 'outsideClick'オプションはどうですかsetTriggersメソッド。ドキュメントには、「outsideClickトリガーにより、クリック時にツールチップが切り替わり、他の何かがクリックされたときに非表示になります」と書かれています。 ドキュメント

1
ArunBabuVijayanath

Angular boostrap ui新しいバージョン1.xは、外部クリック機能を備えています。新しいバージョンにアップグレードしてください。

<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>

私の仕事。

ポップオーバーで送信ボタンまたはクリックイベントが発生した場合、フォーカスは機能しません。この便利な方法です。

1
aviboy2006

1）Popoverにはng-bootstrapを使用します。

2）ng-bootstrapバージョンを3.0.0以降に更新します。つまり、npm install --save @ ng-bootstrap/ng-bootstrap @ 3.0.0

3）更新後、Ngbpopoverの[autoClose]機能を使用できます。

<button type="button" class="btn btn-outline-secondary" popoverTitle="Pop title" [autoClose]="true" ngbPopover="Click anywhere or press Escape to close (try the toggling element too)">Click to toggle</button>

4）役に立てば幸いです！

0
Tejashree Patil

onclick="void(0)"動作を背景要素の一部に追加します。これにより、タップするとポップオーバーが取り除かれます。

https://github.com/angular-ui/bootstrap/issues/212 をご覧ください

0
npn