如何有条件地显示弹出框/工具提示 [英] How do I conditionally show a popover / tooltip

问题描述

我有一个简单的< table>带有ng-repeat行。有些值很长，所以我用椭圆（...）修剪它们。



我需要显示工具提示或popover用于具有椭圆。我可以非常轻松地测试元素：

Hi,

I have a simple <table> with an ng-repeat row. Some of the values are quite long so I trim them with an ellipses (...).

I need to show a tooltip or popover for the cells which have the ellipses. I can test the element fairly easily:

this.hasEllipsis = function(element) {
    return (element.offsetWidth < element.scrollWidth);
}

问题：如果返回true，我怎样才能使用它来显示全文？



我试过检查popover文本，但我似乎无法将元素传递给函数：

Question:How can I use this to only show the full text if this returns true?

I tried checking the popover text but I can't seem to pass the element to the function:

<td popover="{{ getPopoverText(???) }}" popover-placement="right" popover-trigger="mouseenter">

我试过'this'：它是ng-repeat中的项目。我试过'$ event'：未定义。他们尝试的东西非常愚蠢，但我很简单：P



欢迎任何建议^ _ ^

谢谢

Andy

I tried 'this': it was the item in ng-repeat. I tried '$event': undefined. They're prolly silly things to try, but I'm quite simple minded :P

Any suggestions are welcome ^_^
Thanks
Andy

推荐答案

event'：undefined。他们尝试的东西非常愚蠢，但我很简单：P



欢迎任何建议^ _ ^

谢谢

Andy

event': undefined. They're prolly silly things to try, but I'm quite simple minded :P

Any suggestions are welcome ^_^
Thanks
Andy

首先是一个小注，当前版本的UI-Bootstrap已经更改了指令名称。有一些向后兼容性，但我有问题只是移植代码。当前的指令名称是uib-popover，而不是popover（触发器和位置仍然相同）。



指令在自己的范围内运行，但需要对象，通常指令范围有函数问题（变量不在

First a minor note, the current version of UI-Bootstrap has changed the directive names. There is some backwards compatibility, but I've had issues just porting code over. The current directive name is uib-popover, not popover (the trigger and placement are still the same).

A directive runs in its own scope and while it will take objects, generally directive scopes have issues with functions (variables not at

rootScope等）。你可以通过更改数据模型，使用element.fullText和element.displayText函数来获得更好的服务。



真正的半成品版本是这样的：

rootScope, etc). You'd be better served by changing the data model a little, and having an element.fullText and a function for element.displayText.

The truly half-baked version goes something like this:

这篇关于如何有条件地显示弹出框/工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！