Fermer la liste en cliquant quelque part à l'extérieur, dans angulaire
J'ai quelque chose comme ceci:
http://plnkr.co/edit/CoDdWWQz8jPPM4q1mhC5?p=preview
Ce que j'aimerais faire, c'est la fermeture de la liste de la fenêtre après avoir cliqué quelque part à l'extérieur. Je sais qu'il y avait des questions similaires, mais je voudrais savoir comment faire cela dans Angulaire. Problème est, ma liste est situé à l'intérieur de balise de script.
<script type="text/ng-template" id="templateId.html">
This is the content of the template {{name}}
</script>
Double Possible de Masquer Angulaire UI Bootstrap liste en cliquant sur l'extérieur
OriginalL'auteur TheOpti | 2014-08-04
Vous devez vous connecter pour publier un commentaire.
Dans le bootstrap de la documentation qu'ils ont un exemple d'un "dismissable' liste.
L'astuce consiste à ajouter
trigger: 'focus'
à votre liste d'options. Vous avez besoin de changer votre élément à un "focusable' élément (dans cet exemple j'ai utilisé un bouton)Voici ma fourche de votre exemple.
PS. il est important de mentionner que tous les éléments sont nativement 'focusable'. Vous pouvez faire en sorte qu'un élément peut devenir peut recevoir le focus, mais l'ajout de l'attribut
tabindex
(eg.tabindex="-1"
).Il n'existe pas de balises span, dans votre exemple, ou sur un bouton pour que la matière. Ne pas vous dire un tag?
Dans mon projet j'ai somethink comme ceci: <span class="glyphicon glyphicon-utilisateur" data-toggle="liste" liste-placement="bottom" liste-trigger="cliquez sur" sc-utilisateur-modèle-liste ng-hide="!les données.isLoggedIn()"></span> . L'idée est presque la même, mais je suis en utilisant span avec bootstrap icône au lieu de <a> élément
Je sais que c'est tard, mais @TheOpti, si vous ajoutez un attribut tabindex à votre élément span, il devient "focusable' et puis vous pouvez utiliser la fenêtre pop-over-trigger="focus" de la solution. Je pense que c'est plus élégant, puis la création de toute une directive ou à l'aide d'un écouteur sur l'ensemble du document.
Je pense que cela devrait être la accepté de répondre si vous ajoutez une indication sur la façon de rendre les éléments 'focusable' (utiliser l'attribut tabindex)
OriginalL'auteur haxxxton
On dirait que j'ai trouvé une réponse à ma question. Tout ce que nous devons faire est d'appliquer cette solution: Comment faire disparaître une Twitter Bootstrap liste en cliquant à l'extérieur? de la directive doit montrer liste. De plus, nous avons besoin d'ajouter
data-toggle="popover"
de notre bouton.Et, étonnamment, il fonctionne très bien.
Fait! Merci!!!!
Je ne trouve pas l'exhaustivité exemple angulaire. Avez-vous l'esprit reliant moi? @TheOpti
OriginalL'auteur TheOpti
Si vous voulez qu'il fonctionne parfaitement sur tout type d'éléments sans avoir à utiliser un code externe, ni des choses étranges, tout ce que vous avez à faire est d'ajouter ces 2 attributs à votre balise: tabindex="0" faire de l'élément peut recevoir le focus, et la fenêtre pop-over-trigger="focus" pour faire fermer le message une fois que vous cliquez sur désactiver.
Exemple avec
<i>
balise qui n'est pas focusable:OriginalL'auteur HeberLZ
Vous pouvez utiliser le code suivant:
Dans Le Script :
OriginalL'auteur Prasad Shigwan
Cela ouvre une fenêtre pop-over et se ferme en cliquant en dehors de la liste
OriginalL'auteur tsuz