子视图渲染后 Angular 指令中的 DOM 操作答案

【问题标题】：DOM manipulation in Angular directive after sub view rendering子视图渲染后 Angular 指令中的 DOM 操作
【发布时间】：2015-09-17 12:06:26
【问题描述】：

我需要一个指令来截断元素中的长文本，并在发生截断时显示带有全文的弹出框。

See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview

对于文本截断，我使用了 CSS，效果很好。但是当我尝试访问元素内容时，我看到的是{{str.data}}，而不是数据中的确切文本。

我想我什至不需要在渲染后触发，但我找不到任何合适的。

所以我的问题是如何在子视图渲染后运行我的 DOM 操作？

到目前为止我发现的唯一解决方案是使用超时，但我认为有更好的解决方案。

【问题讨论】：

【解决方案1】：

我通过在 mouseover 而不是 link 方法中执行我的 DOM 操作来解决这个问题。

See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview for more details.

PS。 Popover 位置不正确，因为 plnkr 覆盖了 css 操作并且没有设置 top 和 left。

【讨论】：

【解决方案2】：

您的意思是简单的翻转以显示剩余文本吗？这就是简单的 CSS。

.truncate-overflow:hover{ width:auto; overflow:visible; }

如果不是这样，我建议通过限制字符串长度将数据存储到两个单独的数据中。看看如何做到这一点：https://stackoverflow.com/a/7463674/1327678

【讨论】：