呈現子視圖后，Angular指令中的DOM操作

Question

我需要一條指令，該指令將截斷元素中的長文本，並在出現截斷的情況下顯示帶有全文的彈出窗口。

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

對於文本截斷，我使用了CSS，並且效果很好。 但是，當我嘗試訪問元素內容時，會看到{{str.data}}而不是數據中的確切文本。

我想我什至不需要在渲染后就解雇，但是我無法適應任何情況。

所以我的問題是，在呈現子視圖之后如何運行DOM操作？

到目前為止，我發現的唯一解決方案是使用超時，但是我認為有更好的解決方案。

Answer 1

您的意思是僅顯示一個簡單的過渡即可顯示其余文本嗎？ 那是簡單的CSS。

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

如果不是那樣，我建議通過限制字符串長度將數據存儲到兩個單獨的數據中。 查看如何執行此操作： https ： //stackoverflow.com/a/7463674/1327678

Answer 2

我通過在mouseover而不是link方法中執行DOM操作來解決此問題。

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

PS。 彈出位置不正確，因為plnkr會覆蓋CSS的操作，並且不會設置頂部和左側。