Question

我正在做一个面包屑：

Home > Page 1 > Page 1.1

在每个父页面（Home，Page 1）上，我想显示一个包含此页面详细信息的引导工具提示。这很好。

然而，当我点击Tab键直到我到达链接到另一个页面的按钮并按Enter键时，页面会发生变化但工具提示保持打开状态并且永远不会关闭，即使我回到页面并单击任意位置。

以下是模板：

<a ui-sref="home"
   title="Home"
   class="btn btn-default contains-tooltip">
       <span class="fa fa-home"></span>
</a>
<a ng-repeat="page in breadcrumb"
   ui-sref="{{ page.href }}"
   class="btn btn-default contains-tooltip"
   title="{{ page.description }}"
   ng-bind-html="page.title"></a>

相关的JS：

$('.contains-tooltip').tooltip({
  container: 'body',
  html: true,
  trigger: 'hover',
  placement 'bottom'
});

Answer 1

$(...).tooltip不知道州的变化，因为它在Angular之外。您必须强制隐藏工具提示。

添加一个事件监听器，在路由更改时隐藏所有工具提示。

app.module('myApp').run(function($rootScope) {
    $rootScope.$on('$routeChangeStart',function() {
        $('.contains-tooltip').tooltip('hide');
    });
});

状态改变时工具提示永远不会关闭

1 个答案: