一尘不染

在自定义事件上启用angular-ui工具提示

angularjs

我正在尝试使用angular-
ui的工具提示功能向用户显示特定字段无效,但是似乎只能在某些预定义的触发器上显示该工具提示。除了那些触发器外,还有什么方法可以触发工具提示?

例如:

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

阅读 215

收藏
2020-07-04

共1个答案

一尘不染

这是一个把戏。

Twitter
Bootstrap工具提示(Angular-
UI依赖于此)具有一个选项,可以指定带有附加属性的触发事件,如中所示data- trigger="mouseenter"。这为您提供了一种以编程方式(使用Angular)更改触发器的方式:

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

因此,当username$ invalid时,tooltip- trigger表达式将求值为'mouseenter'并显示工具提示。否则,触发器将评估'never'不会触发工具提示的触发器。

编辑:

@cotten(在评论中)提到了一种情况,即使模型有效,工具提示也会卡住并且不会消失。当在输入文本时鼠标停留在输入字段上(并且模型变为有效)时,会发生这种情况。一旦模型验证评估结果为true,tooltip- trigger它将切换为“从不”。

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

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

如您所见,此地图对“从不”事件一无所知,因此无法确定何时关闭工具提示。因此,为了使技巧发挥出色,我们只需要使用我们自己的事件对来更新此映射,然后UI
Bootstrap将知道在tooltip-trigger设置为“从不” 时关闭工具提示时要观察的事件。

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](http://plnkr.co/edit/DmNNkYHfofHTX4omt8GC?p=preview)

注意:$ tooltip提供程序由“ ui.bootstrap.tooltip”模块公开,它允许我们在应用程序配置中全局配置工具提示。

2020-07-04