Masquer Angulaire UI Bootstrap liste en cliquant sur l'extérieur
Je suis en train de fermer manuellement un bootstrap liste pour obtenir la fermeture quand je clique n'importe où sur la document
ou body
qui n'est pas la liste.
La chose la plus proche que j'ai trouvé pour régler ce problème est de créer une directive (trouvé cette réponse) mais c'est pour un déclenchement manuel, si une variable est vrai ou faux.
Quelqu'un pourrait-il m'aider à comprendre comment obtenir de fermer si je clique sur quelque chose qui n'est pas la liste?
Je n'ai pas l'esprit à l'aide de jQuery $(document).click(function(e){});
j'ai juste aucune idée de comment faire pour appeler un proche.
<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
Normalement popover-trigger="focus"
ferait l'affaire, mais ma liste contient du contenu qui doit être cliqué. J'ai un ng-click
à l'intérieur de ma liste qui est ignoré si j'utilise le l'accent déclenchement donc je suis à la recherche d'un pas-si-classique moyen de contourner cela.
- Pourriez-vous fournir un plunkr ou jsfiddle pour nous de plug-and-play?
- voici
- angular-ui.github.io/bootstrap << regarder ici. Il est celui que vous recherchez -- nom "Cliquez-moi". (tsi dit: je suis apparu sur le se concentrer! Cliquez à l'extérieur et je vais disparaître... (c))
Vous devez vous connecter pour publier un commentaire.
ÉDITÉ:
Plunker Démo
Voici comment cela fonctionne (encore longue et explication exhaustive):
Créer un personnalisé directive à la cible de l'élément de déclenchement:
Vous devez déclencher le gestionnaire d'événements personnalisés à partir de l'élément qui a ouvert la liste (dans la démo c'est le bouton). Le défi est que la liste est jointe en tant que frère de cet élément et je pense toujours que les choses ont un plus grand potentiel de briser lorsque vous traversez les DOM et s'attendait à avoir une structure spécifique. Il existe plusieurs façons vous pouvez cibler l'élément déclencheur, mais mon approche est d'ajouter une unique classe de l'élément (I, choisissez "trigger") lorsque vous cliquez sur elle. Une seule liste peut être ouverte à un moment dans ce scénario, il est donc sûr à utiliser un nom de classe, mais vous pouvez la modifier à votre convenance.
Personnalisé Directive
Appliquée à bouton
Créer un personnalisé directive pour le corps du document (ou de tout autre élément) pour déclencher la liste proximité:
La dernière pièce est de créer un personnalisé directive qui permettra de localiser l'élément déclencheur et le feu de l'événement personnalisé pour fermer la fenêtre pop-over lorsque l'élément est appliqué pour la est cliqué. Bien sûr, vous devez exclure les initiales cliquez sur l'événement à partir du seuil de déclenchement de l'élément, ainsi que tous les éléments que vous souhaitez interagir avec l'intérieur de votre liste. Donc, j'ai ajouté un attribut appelé exclure de la classe, vous pouvez définir une classe que vous pouvez ajouter aux éléments dont les événements de clic doit être ignoré (ne pas causer de la liste pour fermer).
Pour nettoyer les choses, lorsque le gestionnaire d'événement est déclenché, nous enlever le déclenchement de la classe qui a été ajouté à l'élément de déclenchement.
J'ai ajouté ceci à la balise body, de sorte que la page entière* agit comme un révocable pour toile de fond la liste:
Et, j'ai ajouté de l'exclure de la classe à l'entrée dans la liste:
Donc, il ya quelques réglages et de pièges, mais je vais laisser cela à vous:
Testé dans Chrome, Firefox et Safari.
Error: undefined is not an object (evaluating 'angular.element(trigger[0]).triggerHandler('click').removeClass')
. Je ne sais pas pourquoii
être utilisé danscloseTrigger(i)
. Est censé faire quelque chose? Parce que je suis le chargement du contenu de façon dynamique, j'obtiens le même message d'erreur que j'ai eu. Donc je vais faire quelques tests. Merci pour la mise à jour, je vous ferai savoir si je peut le comprendretriggerHandler('click')
etremoveClass('popovr-trigger')
être séparés des actions ou d'autre, je voudrais obtenir cette erreur pour une raison quelconque. Avait également utiliser jQuery pour obtenir les éléments en raison de la charge dynamique. Pour certaines raisons, j'ai dû passer levar trigger
pour être déclaré et transmis par le biais de la fonction, car il n'était pas l'un de mes éléments.(element.hasClass('trigger'))? element.removeClass('trigger'): element.addClass('trigger');
dans lepopoverDirective
Mise à JOUR: Avec la version 1.0, nous avons ajouté un nouveau déclencheur appelé
outsideClick
qui va automatiquement fermer la fenêtre pop-over ou une info-bulle lorsque l'utilisateur clique en dehors de la liste ou info-bulle.En commençant par le 0.14.0 de la libération, nous avons ajouté la capacité de contrôler par programme lorsque votre info-bulle/liste est ouverte ou fermée via le
tooltip-is-open
oupopover-is-open
attributs.popover-is-open
pour fermer la liste en cliquant à l'extérieur de n'importe où?popover-is-open
évalue à true, alors la boîte de dialogue s'ouvre. Vous pouvez contrôler cela par une étendue variable par exemple.master
et est prévue pour la version 1.0. Il y a un nouveau déclencheur appeléoutsideClick
.Depuis Angulaire UI Bootstrap 1.0.0, il y a un nouveau
outsideClick
de déclenchement pour les info-bulles et popovers (présenté dans ce pull request. Dans Angulaire UI Bootstrap 2.0.0, lepopover-trigger
a été modifié pour utiliser angulaire des expressions (Changelog), la valeur doit être mis entre guillemets. Ce code fonctionne avec les versions actuelles de angular-ui:Ce code fonctionne avec les anciennes versions de Angulaire UI Bootstrap (avant 2.0.0):
popover-trigger="'outsideClick'"
.Il y a une propriété appelée
popover-trigger
que vous pouvez attribuer la propriétéfocus
pour.Cela fait l'affaire! 🙂
Edit:
Afin de permettre l'info-bulle de cliquer dessus et de ne pas déclencher l'accent perdu, envisager une approche similaire à ce
Si vous voulez qu'il fonctionne dans angulaire, essayez de créer votre propre définition du déclencheur. Des Suggestions sur la façon de faire qui peut être trouvé ici.
input
textetabindex="0"
il fixe. Cependant, dans ma liste, j'ai du code html avec unng-click
qui est ignoré lors de l'utilisation de mise déclenchement. 🙁tabindex="0"
t fix it. Mais s'il vous plaît regarder le fond de ma question initiale qui explique pourquoi j'ai besoin de créer une approche non conventionnelle à mon problème..popover('hide')
ne fonctionne pas avec angulaire de bootstrappopover-trigger="'outsideClick'"
Cela fonctionnera parfaitement.popover-trigger="outsideClick"
Ce ne sera pas.J'ai pris 1 journée pour faire le tri pourquoi il n'a pas de travail pour moi.
C'est parce qu'ils vérification ce à l'aide de ce code,
"if (trigger === 'outsideClick')"
Ce que vous cherchez est
À partir de la documentation - La outsideClick déclencheur sera la cause de la liste de basculer sur un clic, et se cacher quand tout le reste est cliqué.
Vous pouvez utiliser:
Balisage
Javascript
J'ai eu le même problème et
popover-trigger="'outsideClick'"
a fonctionné pour moi. Intéressant de noter que la documentation n'a pas ce problème.Triggers
Angulaire de bootstrap de l'interface utilisateur de la nouvelle version 1.x ayant de la facilité à côté cliquez sur la fonction. mettre à niveau vers la nouvelle version.
son travail pour moi.
focus ne fonctionne pas si aucun bouton "soumettre" ou cliquez sur l'événement dans la liste. donc, ce moyen utile de le faire.
Ce sujet de la " outsideClick' dans le '$uibTooltipProvider' setTriggers méthode. La Documentation dit "Le outsideClick déclencheur sera la cause de la bulle d'aide pour basculer sur un clic, et se cacher quand tout le reste est cliqué."
La Documentation
Ajouter
onclick="void(0)"
comportement de certains de vos éléments d'arrière-plan qui gemmage se débarrasser de la popovers.Ont un coup d'oeil à https://github.com/angular-ui/bootstrap/issues/2123
1) Utilisation ng-bootstrap pour la Liste.
2) mise à Jour le ng-bootstrap version 3.0.0 ou au-dessus.
j'.e npm install --save @ng-bootstrap/[email protected]
3) Après la mise à jour, vous pouvez utiliser [fermeture] la fonctionnalité de Ngbpopover.
4) j'Espère que ça aide !