在angularJS中同时显示多个工具提示

如何禁用除鼠标移动之外的所有其他工具提示？在angularJS中同时显示多个工具提示

我试图达到的目标是排除显示的工具提示，除了显示为最后一个的工具提示。有时会出现太多的工具，使得无法读取所需的（最后一个）。

我是新来的像$ watch和$ observe这样的东西，但据我所知我应该使用$ watch，如果我想使用{{}}括号来观察属性/属性等其他内容。

请参阅我plunckr（的script.js）看看我的指令，实现迄今： http://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalogue

它定义了一种特殊的方式，因为它装配一个HTML出控制器创建一个提示，并提出了一些数据在其中的HTML（作为名称，描述和图像）。

我想观察工具提示及其tt_isOpen属性，并排除所有其他显示。

希望的行为似乎来自“悬停”。但是，如何确定工具提示窗口将保持打开状态的时间？我想悬停在自己的工具提示窗口。即使工具提示窗口不在触发区域的位置区域（该区域被徘徊），也可以这样做吗？

来源

2014-02-27 Pille

您可以从Angular UI配置工具提示指令，以基于自定义事件显示/隐藏。

This Plnkr就是这样做的。它定义打开/关闭事件：

app.config(function($tooltipProvider) { 
    $tooltipProvider.setTriggers({'open':'close'}); 
});

对其设置指令属性tooltip-trigger（和一个额外的类）：

<input type="text" value="Hover me!" tooltip="See? " tooltip-trigger="open" tooltip-placement="bottom" class="form-control has-tooltip" />

然后它触发悬停在右侧的元素这些事件：

$('.has-tooltip').hover(function() { 
    $('.has-tooltip').not(this).trigger('close'); 
    $(this).trigger('open'); 
});

如果你想这样做没有jQuery的一个方法是将所有的提示注册到服务：

angular.directive("hasTooltip",function (tooltipService) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      tooltipService.register(element); 
     } 
    } 
});

该服务可以跟踪所有工具提示，并从那里您可以触发正确的事件在正确的元素。

注意：tooltip指令希望这些事件在Angular $ digest循环之外被抛出，所以不能用ng-click或其他Angular结构触发弹出窗口。

来源

2014-02-27 18:05:13

（删除我最后的评论，因为你改变了你的答案）非常感谢你的代码示例。我将如何实现这个没有jquery（只有JS/angularJS）？ – Pille

你有一个想法如何使用angularFS来实现这一点？ – Pille

您可以创建一个指令，将其元素注册到服务中，然后让该服务触发正确的事件 –

在angularJS中同时显示多个工具提示

回答

相关问题