it-swarm.com.de

Blenden Sie das Angle UI Bootstrap-Popover aus, wenn Sie außerhalb davon klicken

Ich versuche, ein Bootstrap-Popover manuell zu schließen, damit es geschlossen wird, wenn ich irgendwo auf die document oder body klicke, die nicht das Popover ist.

Am besten habe ich dazu eine Direktive erstellt ( fand diese Antwort ). Dies gilt jedoch für einen manuellen Trigger, wenn eine Variable true oder false ist.

Könnte mir jemand helfen, herauszufinden, wie ich ihn schließen kann, wenn ich auf etwas klicke, das nicht der Popover ist?

Ich habe nichts dagegen, mit jQuery $(document).click(function(e){}); zu arbeiten. Ich habe keine Ahnung, wie man einen Abschluss anruft.

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

Normalerweise würde popover-trigger="focus" den Trick tun, aber mein Popover enthält Inhalte, die angeklickt werden müssen. Ich habe einen ng-click in meinem Popover, der ignoriert wird, wenn ich den focus - Trigger verwende, also suche ich einen nicht so konventionellen Weg, um das zu umgehen.

45
bryan

BEARBEITET:

Plunker Demo

So funktioniert es (die noch lange und erschöpfende Erklärung):

  1. Erstellen Sie eine benutzerdefinierte Anweisung, mit der Sie das Triggerelement anvisieren können.
  2. Erstellen Sie eine benutzerdefinierte Direktive, die dem Body hinzugefügt wird und das Auslöserelement findet und das benutzerdefinierte Ereignis auslöst, wenn Sie darauf klicken.

Erstellen Sie eine benutzerdefinierte Anweisung, um auf das Triggerelement zu zielen:

Sie müssen den benutzerdefinierten Ereignishandler von dem Element auslösen, das das Popover geöffnet hat (in der Demo ist dies die Schaltfläche). Die Herausforderung besteht darin, dass der Popover als Geschwister an dieses Element angehängt wird, und ich denke immer, dass die Dinge ein größeres Potenzial haben, zu brechen, wenn Sie das DOM durchqueren und davon ausgehen, dass es eine bestimmte Struktur hat. Es gibt mehrere Möglichkeiten, auf das Triggerelement zu zielen, aber mein Ansatz besteht darin, dem Element einen eindeutigen Klassennamen hinzuzufügen (ich wähle "Trigger"), wenn Sie darauf klicken. In diesem Szenario kann jeweils nur ein Popover geöffnet werden. Sie können also einen Klassennamen verwenden, Sie können ihn jedoch nach Ihren Wünschen ändern.

Zollrichtlinie

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

Angewendet auf die Schaltfläche

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

Erstellen Sie eine benutzerdefinierte Direktive für den Dokumentkörper (oder ein beliebiges anderes Element), um das Popover zu schließen:

Der letzte Teil besteht darin, eine benutzerdefinierte Direktive zu erstellen, die das auslösende Element ermittelt und das benutzerdefinierte Ereignis auslöst, um das Popover zu schließen, wenn auf das Element geklickt wird, auf das es angewendet wird. Natürlich müssen Sie das erste Klickereignis vom 'Trigger'-Element und alle Elemente, mit denen Sie interagieren möchten, im Popover ausschließen. Daher habe ich ein Attribut mit dem Namen exclude-class hinzugefügt, sodass Sie eine Klasse definieren können, die Sie Elementen hinzufügen können, deren Klickereignisse ignoriert werden sollen (ohne dass der Popover geschlossen wird).

Wenn der Event-Handler ausgelöst wird, entfernen wir die Trigger-Klasse, die dem Trigger-Element hinzugefügt wurde.

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)
          }
        }
      });
    }
  };
});

Ich habe dies dem body-Tag hinzugefügt, sodass die gesamte Seite * als unzulässige Kulisse für den Popover fungiert:

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

Und ich habe die Ausschlussklasse der Eingabe im Popover hinzugefügt:

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

Es gibt also einige Verbesserungen und Gotchas, aber das überlasse ich Ihnen:

  1. In der Link-Funktion der popover-close-Direktive sollten Sie eine Standard-Exclude-Klasse festlegen, falls keine definiert ist.
  2. Sie müssen sich dessen bewusst sein, dass die popover-close-Direktive an ein Element gebunden ist. Wenn Sie also die Stile entfernen, die ich für die HTML- und Body-Elemente festgelegt habe, um ihnen eine Höhe von 100% zu geben, könnten sich tote Bereiche im Ansichtsfenster befinden, wenn Ihr Inhalt dies nicht zulässt fülle es nicht 

Getestet in Chrome, Firefox und Safari.

23
jme11

UPDATE: Mit Version 1.0 haben wir einen neuen Trigger namens outsideClick hinzugefügt, der das Popover oder die QuickInfo automatisch schließt, wenn der Benutzer außerhalb der Popover oder der QuickInfo klickt.

Ab Version 0.14.0 haben wir die Möglichkeit hinzugefügt, programmgesteuert zu steuern, wann Ihr Tooltip/Popover über die Attribute tooltip-is-open oder popover-is-open geöffnet oder geschlossen ist.

42
icfantv

Seit Angular UI Bootstrap 1.0.0 gibt es einen neuen outsideClick-Trigger für Tooltips und Popovers (eingeführt in diese Pullanforderung .) In Angular UI Bootstrap 2.0.0 wurde der popover-trigger für die Verwendung von Winkelausdrücken ( Changelog ), so dass der Wert in Anführungszeichen gesetzt werden muss Dieser Code funktioniert mit aktuellen Versionen von angle-ui:

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

Dieser Code funktioniert mit älteren Versionen von Angular UI Bootstrap (vor 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

Es gibt eine Eigenschaft namens popover-trigger, der Sie die Eigenschaft focus zuweisen können. 

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

Das macht den Trick! :)

Bearbeiten: Damit der Tooltip angeklickt werden kann und der Fokus nicht ausgelöst wird, sollten Sie eine Annäherung ähnlich wie betrachten.

Wenn Sie möchten, dass es in eckig arbeitet, erstellen Sie eine eigene Triggerdefinition. Vorschläge dazu finden Sie hier .

13
Patrick Motard

popover-trigger="'outsideClick'" Das wird perfekt funktionieren.

popover-trigger="outsideClick" Das wird nicht. 

Ich brauchte einen Tag, um herauszufinden, warum es für mich nicht funktionierte.

Es ist, weil sie dies mit diesem Code überprüfen, "if (trigger === 'outsideClick')"

12
ajin

Was Sie suchen, ist 

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

Aus der Dokumentation - Durch den Trigger OutsideClick wird der Popover beim Klicken umgeschaltet und ausgeblendet, wenn auf etwas anderes geklickt wird.

6

Sie können verwenden:

Markup

<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

Ich hatte das gleiche Problem und popover-trigger="'outsideClick'" arbeitete für mich. Interessanterweise wurde in der Dokumentation dieses Problem nicht angegeben.

2
Jake Scott

Wie sieht es mit der Option "outsideClick" in der Methode "$ uibTooltipProvider" setTriggers aus? Dokumentation sagt "Der Trigger OutsideClick bewirkt, dass der Tooltip beim Klicken umschaltet und ausgeblendet wird, wenn auf etwas anderes geklickt wird." Dokumentation

1

Angular boostrap ui neue Version 1.x mit seitlicher Klickfunktion. Aktualisieren Sie es auf eine neue Version. 

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

seine Arbeit für mich.

der Fokus wird nicht funktionieren, wenn in Popover ein Submit-Button oder ein Klick-Ereignis angezeigt wird. so diese nützliche Möglichkeit zu tun.

1
aviboy2006

1) Verwenden Sie ng-bootstrap für Popover.

2) Aktualisieren Sie die ng-bootstrap-Version auf Version 3.0.0 oder höher

3) Nach dem Update können Sie die Funktion [autoClose] von Ngbpopover verwenden.

<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) Ich hoffe es hilft!

0
Tejashree Patil

Fügen Sie einigen Ihrer Hintergrundelemente onclick="void(0)" hinzu, die die Popover entfernen, wenn Sie auf sie tippen.

Schauen Sie unter https://github.com/angular-ui/bootstrap/issues/2123 nach

0
npn