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

Question

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">
 

Answer 1

Voici une astuce.

Twitter Bootstrap info-bulles (Angular-UI repose sur l') ont une option pour spécifier un événement déclencheur, avec un attribut supplémentaire comme en data-trigger="mouseenter". Cela vous donne un moyen de changer le déclencheur par programme (Angulaire):

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

Ainsi, lorsque username $invalide, l' tooltip-triggerexpression donnera 'mouseenter' et l'info-bulle s'affiche. Sinon, le déclencheur s'évaluer à l' 'never' , ce qui en retour n'allume pas l'info-bulle.

EDIT:

@cotten (dans les commentaires) mentionne un scénario où l'info-bulle est coincé et ne disparaîtra pas, même lorsque le modèle est valide. Cela se produit lorsque la souris reste sur le champ de saisie alors que le texte est inscrit (et le modèle devient valide). Dès que la validation du modèle est évaluée à true, l' tooltip-triggerva passer à "jamais".

UI Bootstrap utilise un soi-disant triggerMap afin de déterminer à qui les événements de la souris pour afficher/masquer l'info-bulle.

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

Comme vous pouvez le voir, cette carte ne sait rien sur le "jamais" de l'événement, il est donc impossible de déterminer le moment de fermer l'info-bulle. Donc, pour faire astuce jouer gentiment nous avons seulement besoin de mettre à jour cette carte avec notre propre paire événement et UI Bootstrap saurez alors quel événement à observer pour la fermeture de la bulle d'aide lors de l' 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

_{Note: $info-bulle fournisseur est exposée par l' "de l'interface utilisateur.bootstrap.tooltip" module et il nous permet de configurer globalement notre info-bulles dans la configuration de l'application.}

Answer 2

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.