web-dev-qa-db-fra.com

Activer l'infobulle de l'interface angulaire sur les événements personnalisés

J'essaie d'utiliser la fonctionnalité d'info-bulle d'angular-ui pour montrer à mon utilisateur qu'un champ particulier n'est pas valide, mais il semble que l'info-bulle ne peut être affichée que sur certains déclencheurs prédéfinis. Existe-t-il un moyen de déclencher l'info-bulle, à l'exception de ces déclencheurs?

Par exemple:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">
angularjsangularjs-directiveangular-ui
58
vivek

Voici un truc.

Twitter info-bulles d'amorçage (sur lequel Angular-UI s'appuie) a une option pour spécifier l'événement déclencheur avec un attribut supplémentaire, comme dans data-trigger="mouseenter". Cela vous permet de modifier le déclencheur par programmation (avec Angular):

<input 
  ng-model="user.username"
  name="username"
  tooltip="Some text" 
  tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/>

Donc, quand username est $ invalide, le tooltip-triggerexpression sera évaluée à 'mouseenter' et l'info-bulle apparaîtra. Sinon, le déclencheur sera évalué à 'never' qui, en retour, ne déclenche pas l'info-bulle.

MODIFIER:

@cotten (dans les commentaires) mentionne un scénario dans lequel l'infobulle reste bloquée et ne disparaîtra pas, même si le modèle est valide. Cela se produit lorsque la souris reste sur le champ de saisie pendant la saisie du texte (et que le modèle devient valide). Dès que la validation du modèle est évaluée à true, le tooltip-triggerwill basculer sur "jamais".

UI Bootstrap utilise un soi-disant triggerMap pour déterminer sur quels événements de souris afficher/masquer l'info-bulle.

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

Comme vous le voyez peut-être, cette carte ne connaît rien de l'événement "jamais". Il est donc impossible de déterminer quand fermer l'info-bulle. Donc, pour bien jouer aux figures, il suffit de mettre à jour cette carte avec notre propre paire d’événements et notre interface utilisateur Bootstrap saura alors quel événement observer pour fermer l’info-bulle lorsque tooltip-trigger est réglé sur "jamais".

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

Remarque: Le fournisseur $ tooltip est exposé par le module "ui.bootstrap.tooltip" et nous permet de configurer globalement nos info-bulles dans la configuration de l'application.

108
Stewie

J'ai essayé quelque chose de différent

tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}"

De cette façon, mon info-bulle n'a quelque chose d'écrit que lorsque l'entrée est invalide, et si rien n'a été écrit, l'info-bulle ne s'affiche pas.

32
Victor Ivens

À partir de la version 0.12.0, tooltip-tigger n'est plus observable (vous ne pouvez donc pas le modifier par programme).

Vous pouvez utiliser tooltip-enable pour avoir le même comportement. Voir plus de détails ici: https://github.com/angular-ui/bootstrap/issues/3372

9
Bruno

Vous pouvez également ajouter le tooltip-enable à la place du tooltip-trigger sur votre terrain.

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-enable="{{myForm.username.$invalid}}">

Dans ce cas, si le nom d'utilisateur n'est pas valide ($ invalid renvoie true), l'info-bulle apparaîtra.

3
Salma Hamed

Selon la nouvelle version du document, je suggérerai d'utiliser le code HTML ci-dessous. la réponse de stewie n'est pas utile avec la dernière version.

<input class="form-control" name="name" type="text" required ng-model="name"
                   uib-tooltip="name required" tooltip-is-open="formname.name.$invalid" 
tooltip-trigger="none" tooltip-placement="auto top" />

Remplacez simplement le nom de votre formulaire dans tooltip-is-open="formname.name.$invalid"

tu es prêt.

0
nirmal