DOM manipulation in Angular directive after sub view rendering

Question

I need a directive that will truncate long text in element and show a popover with full text in case truncation take place.

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

For text truncation I've used CSS and it works well. But when I'm trying to access element content I see {{str.data}} rather then exact text from the data.

I guess that I need even't that is fired after rendering, but I can't fing any suitable.

So my question how can I run my DOM manipulation after sub view get rendered?

The only solution I've found so far is using timeout, but I think that there is better solution for it.

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Do you mean just a simple rollover to show the remainder text? That's simple CSS.

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

If not that, I would suggest storing the data into two separate pieces of data by limiting the string length. See how to do that: https://stackoverflow.com/a/7463674/1327678

edited May 23 '17 at 12:30

Community

1
1

answered Jun 30 '15 at 15:58

thatgibbyguy

3,583
3
20
35

Not exactly, I need to show bootstrap help-tooltip that will contain the full string, only if overflow take place. – Oleg Oshkoderov Jul 01 '15 at 06:53

score 0 · Answer 2 · answered Jul 01 '15 at 09:29

I worked around this issue by performing my DOM manipulation inside mouseover instead of link method.

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

PS. Popover position is incorrect because plnkr overrides css manipulation and do not set top and left.

DOM manipulation in Angular directive after sub view rendering

2 Answers2