javascript - 如何在基于 angularjs 的应用程序中隐藏工具提示？

Question

我有一个带有嵌套 td 的 tr 列表。这是一个基于 Angular 应用程序。我还使用 tooltip.js Bootstrap 插件。我想要实现的是当我将鼠标悬停在 td 上时隐藏 tr 的工具提示。我的 HTML 看起来像这样:

<tr ng-repeat="model in somelist" name="someName" tooltip="someTooltip">  

  <td tooltip="someOtherTooltip" ng-mouseover="hideTooltip()"></td>

</tr>

和 .js 像这样:

$scope.hideTooltip = function () {
    $("[name='someName']").tooltip('hide');
};

Answer 1

从 Controller 执行 DOM 操作是一种不好的做法。你必须按照指令去做。在你的情况下，正如上面所建议的，你最好像这样使用 ngHide :

<tr ng-repeat="model in somelist" name="someName" tooltip="someTooltip">  
    <td tooltip="someOtherTooltip" ng-hide="tooltipIsHidden" ng-mouseover="hideTooltip()"></td>
</tr>

在你的 Controller 中:

$scope.hideTooltip = function () {
    $scope.tooltipIsHidden = true;
};

然而，在现实世界中，您需要传递要隐藏的工具提示的参数，并使用像 tooltip.isHidden 这样的属性。

顺便说一句，您可能想查看UI Bootstrap 。它包含封装在 Angular 指令(包括工具提示)中的 Bootstrap UI 组件，以及许多有用的选项。