初始化加載頁面的「隱藏」工具提示

我的問題屬於引導工具提示。我的頁面中有一堆工具提示（準確地說是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次。

初始化所有引導工具提示的更好方法是什麼（如果有辦法的話），無論隱藏或不隱藏？

謝謝:)

來源

2017-02-21 Emir Masic

ng-if防止DOM元素被呈現。因此，在document.ready初始化不會佔用您ng-if假元素

效果相反，你可以使用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">

希望它可以幫助

來源

2017-02-21 12:50:09 Khaleel

'ng-if'防止它們被附加到DOM，隨後它們不會被渲染。 – svarog

初始化加載頁面的「隱藏」工具提示

回答

相關問題