在页面加载时初始化“隐藏”工具提示

Question

大家好 :)

我的问题与引导工具提示有关。我的页面中有一堆工具提示（准确地说是 5 个）。

工具提示看起来（或多或少）如下所示：

<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>

我在页面的最顶部（就在 之后）用经典初始化它们：

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

大多数工具提示都已初始化，没有任何问题，但有 2 个无法正常工作。页面的某些部分在页面加载时隐藏，并根据用户输入的内容显示。

例子：

<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">

...

这些工具提示在开始时未正确初始化。作为一个快速修复，我只是复制了上面的 javascript 并将其放在工具提示之后，这很有效。除了杀死 DRY 原则，因为相同的 js 在页面中出现 3-4 次。

初始化所有引导工具提示（无论是否隐藏）的更好方法（如果有的话）是什么？

谢谢:)

Answer 1

ng-if 阻止渲染 DOM 元素。因此document.ready 中的初始化不会对您的ng-if false 元素生效

相反，您可以使用ng-show/ ng-hide，因为它们只会更改显示 css-poperty

将您的示例修改为 ng-show 而不是 ng-if

<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">

希望对你有帮助