如何在基於angularjs的應用程序中隱藏工具提示？

我有一個使用嵌套tds的trs列表。這是一個基於角度的應用程序。我也使用tooltip.js bootstrap插件。我試圖實現的是當我在td上進行鼠標懸停時，隱藏tr的工具提示。我的HTML看起來像這樣：如何在基於angularjs的應用程序中隱藏工具提示？

<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'); 
};

來源

2016-09-15 Lukasz Kisicki

爲什麼NG-鼠標懸停在裏面TD提示 –

理想情況下，你會提出，在一條指令，而不是一個控制器 –

它不是。我的錯。現在編輯。 –

可以使用ngHide。我認爲它對你的歡呼有幫助！

來源

2016-09-15 07:47:36

從Controller執行DOM操作是一種不好的做法。你必須從指令中完成。在你的情況，如上建議，你最好使用ngHide像這樣：

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

在你的控制器：

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

在現實世界中，不過，你需要傳遞的參數要隱藏的工具提示，並使用類似tooltip.isHidden的屬性。

順便說一句，你可能想看看UI Bootstrap。它支持包含在Angular指令（包括工具提示）中的Bootstrap UI組件，並帶有許多有用的選項。

來源

2016-09-15 07:54:53 EternalLight

我的建議是使用UI Bootstrap。

下面是關於如何使用工具提示功能的鏈接： https://angular-ui.github.io/bootstrap/#/tooltip

來源

2016-09-15 07:56:54 Chrisposure

如何在基於angularjs的應用程序中隱藏工具提示？

回答

相關問題