angularjs – 对自定义事件启用angular-ui工具提示

前端之家收集整理的这篇文章主要介绍了angularjs – 对自定义事件启用angular-ui工具提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用angular-ui的工具提示功能向我的用户显示特定字段无效,但似乎工具提示只能在一些预定义的触发器上显示。有没有什么办法,我可以触发工具提示除了那些触发器?

例如:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">
这是一个伎俩。

Twitter Bootstrap tooltips(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]}}" 
/>

因此,当用户名为$ invalid时,tooltip-triggerserexpression将求值为“mouseenter”,工具提示显示。否则,触发器将评估为“从不”,它将不会触发工具提示

编辑:

@cotten(在评论中)提到一个场景,工具提示被卡住,即使模型是有效的,也不会消失。当输入文本时鼠标停留在输入字段上(并且模型变得有效)时,会发生这种情况。一旦模型验证评估为true,工具提示 – 触发器将切换到“从不”。

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','focus': 'blur','never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

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

原文链接:https://www.f2er.com/angularjs/146710.html

猜你在找的Angularjs相关文章