启用自定义事件角UI提示 [英] Enable angular-ui tooltip on custom events

问题描述

我想使用的角度，用户界面​​的提示功能，以显示我的用户的特定字段是无效的，但它似乎提示可以显示仅在某些pre定义的触发器。有没有什么办法由我可以触发提示除了那些触发器？

例如：

 ＆LT;输入
    TYPE =文本
    提示=无效的名字！
    提示位置=右
    提示触发=$ myForm.username无效。＆GT;
 

解决方案

下面是一个把戏。

提示（即角UI依赖）必须指定触发事件的选项带有附加属性在数据触发=的mouseenter。这使您（角）编程改变的是触发的一种方式：

＆LT;输入
  NG-模式=user.username
  NAME =用户名
  提示=一些文本
  提示触发={{{真：'了mouseenter'，假：'从不'}。myForm.username $无效]}}
/＆GT;


所以，当用户名为$无效，提示触发前pression将评估为'的mouseenter'和提示会显示出来。否则，触发器将计算为'从不'这回不会火起来的工具提示。

编辑：

@cotten（在评论）提到这样一个场景，提示卡并不会消失，即使模型是有效的。这发生在鼠标停留在输入栏中同时被输入的文本是（与模型变为有效）。一旦模型验证计算结果为真，则提示触发将切换为从不。

UI引导使用所谓的 triggerMap 来确定哪些鼠标事件显示/隐藏工具提示。

//默认隐藏触发每场触发
VAR triggerMap = {
  '的mouseenter'：'鼠标离开，
  '点击'：'点击'，
  '焦点'：'模糊'
};


正如你可能会看到，这张地图一无所知从不事件，因此它无法确定何时关闭的提示。所以，做出来的特技播放很好，我们只需要用我们自己的事件对更新此地图，然后UI引导就知道遵守哪些事件关闭提示时，提示触发设置为从不。

的app.config（['$ tooltipProvider'，函数（$ tooltipProvider）{
  $ tooltipProvider.setTriggers（{
    '的mouseenter'：'鼠标离开，
    '点击'：'点击'，
    '焦点'：'模糊'，
    从来没有：鼠标离开//＆LT; - 这确保工具提示将消失在鼠标离开
  }）;
}]）;


<大骨节病> PLUNKER

<子>注：$提示提供商通过ui.bootstrap.tooltip模块曝光，它使我们在全球范围内配置我们在提示应用配置

。

I am trying to use angular-ui's tooltip functionality to show my user that a particular field is invalid but it seems that the tooltip can be shown only on some pre-defined triggers. Is there any way by which I can trigger the tooltip except those triggers?

For example:

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

解决方案

Here's a trick.

Twitter Bootstrap tooltips (that Angular-UI relies upon) have an option to specify the trigger event with an additional attribute as in data-trigger="mouseenter". This gives you a way of changing the trigger programmatically (with Angular):

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

So when username is $invalid, the tooltip-triggerexpression will evaluate to 'mouseenter' and tooltip will show up. Otherwise, the trigger will evaluate to 'never' which in return won't fire up the tooltip.

EDIT:

@cotten (in comments) mentions a scenario where tooltip gets stuck and won't go away even when model is valid. This happens when mouse stays over the input field while the text is being entered (and model becomes valid). As soon as model validation evaluates to true, the tooltip-triggerwill switch to "never".

UI Bootstrap uses a so called triggerMap to determine on which mouse events to show/hide the tooltip.

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

As you may see, this map knows nothing about the "never" event, so it's unable to determine when to close the tooltip. So, to make out trick play nicely we only need to update this map with our own event pair and UI Bootstrap will then know what event to observe for closing the tooltip when tooltip-trigger is set to "never".

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: $tooltip provider is exposed by the "ui.bootstrap.tooltip" module and it allows us to globally configure our tooltips in app configuration.}

这篇关于启用自定义事件角UI提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！