在angularJS中一次显示多个工具提示

Question

如何禁用除鼠标所在的工具提示之外的所有其他工具提示？

我想要实现的是不显示工具提示，除了最后一个显示的工具提示。有时会出现太多工具说明，导致无法阅读所需的（= 最后一个）。

我不熟悉 $watch 和 $observe 之类的东西，但据我所知，如果我想用 {{ }} 括号观察属性/属性等其他东西，我应该使用 $watch。

请查看我的 plunckr (script.js) 以了解我的指令到目前为止所取得的成就： http://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalogue

它定义了一种特殊的方法来创建工具提示，因为它从控制器中组装出 HTML，并将 HTML 中的一些数据放入其中（作为名称、描述和图像）。

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

所需的行为似乎来自“悬停”。但是我如何确定工具提示窗口将保持打开多长时间？ 我想要工具提示窗口，同时将鼠标悬停在自身上。即使工具提示窗口超出触发它的区域（被悬停的区域）的位置区域，这是否可能？

Answer 1

您可以配置来自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);
        }
    }
});

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

注意：工具提示指令希望这些事件在 Angular $digest 循环之外被抛出，因此您无法使用 ng-click 或其他 Angular 构造触发弹出窗口。