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.

Community · Accepted Answer · 2017-05-23 12:30:02Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 30, 2015 at 15:58

thatgibbyguy

4,1433 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Oshkoderov Over a year ago

Not exactly, I need to show bootstrap help-tooltip that will contain the full string, only if overflow take place.

Oleg Oshkoderov · Accepted Answer · 2015-07-01 09:29:58Z

0

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.

answered Jul 1, 2015 at 9:29

Oleg Oshkoderov

5781 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

DOM manipulation in Angular directive after sub view rendering

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related