can't get setTimeout to clear in a directive?

352 views
Skip to first unread message

yahya Kacem

unread,
Mar 12, 2013, 2:25:31 PM3/12/13
to ang...@googlegroups.com
Hi, I made this plunker with an example of my problem, I need to make a directive that on mouse enter it add and remove classes to the element like this:
removeClass('class1');
addClass('class2');
removeClass('class2');
addClass('class3');
removeClass('class3');
addClass('class4');
removeClass('class4');
addClass('class5');
Of course in better way, and on mouse leave do the reverse, but it's not working.
Any help, thanks in advance. 

Florian Orben

unread,
Mar 12, 2013, 2:53:06 PM3/12/13
to ang...@googlegroups.com
Hey there,

you can't use element.on if you didn't include jquery - you have to use element.bind

If you just want to switch classes on mouseenter/leave you can do it this way:

In the plnkr are also two other divs, showcasing you how to switch the class even without a directive

- Flo

yahya Kacem

unread,
Mar 12, 2013, 4:15:15 PM3/12/13
to ang...@googlegroups.com
That's not what i want actually, I don't want to just switch between 2 classes, but more like 5 classes or more so if you look to my first plunker you'll see a function called changeClass it will change the classes from class1 to class5 and if you look at the style.css file you'll see 5 classes there waiting to be used.
So basically I want to switch between 5 classes with a delay to give the hovered element some animated effect.
I hope it's clear enough, and thanks for replaying.

yahya Kacem

unread,
Mar 12, 2013, 4:22:32 PM3/12/13
to ang...@googlegroups.com
Note the plunker that I provide will cause problem in browser because the setTimeout doesn't get cleared so it will run forever be careful not to cause your computer to run out of memory.
Sorry. :)


On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

Clint Checketts

unread,
Mar 12, 2013, 4:49:57 PM3/12/13
to ang...@googlegroups.com
Here is a plunk that doesn't crash the browser (though it doesn't animate either): http://plnkr.co/edit/zYOdpsuww4Bo6srFAZ4v?p=preview

You have a few issues, you are treating setTimeout as setInterval. A timeout runs just once, so I moved the if block to set if it will fire the next timeout or not. Also consider switching fro setTimout to use $timeout

-Clint


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Florian Orben

unread,
Mar 12, 2013, 5:15:44 PM3/12/13
to ang...@googlegroups.com
Ah got you wrong there, here's an example with timeout to fake an animation ;) :


Am Dienstag, 12. März 2013 19:25:31 UTC+1 schrieb yahya Kacem:

yahya Kacem

unread,
Mar 12, 2013, 10:59:28 PM3/12/13
to ang...@googlegroups.com
Thanks, that's exactly what i'm looking for.

On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

yahya Kacem

unread,
Mar 13, 2013, 3:45:32 AM3/13/13
to ang...@googlegroups.com
Actually there"is a bug with this solution, it requires that the element can only have one class if it had multiple classes they will be removed, example plunker here.


On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

yahya Kacem

unread,
Mar 16, 2013, 2:52:49 AM3/16/13
to ang...@googlegroups.com
Hi, again I change the approach to this problem, now I'm not using any directives, but still can't seem to get the functionality that I'm looking for, here's a plunker with an example code, by the way I'm using underscore for looping through the array of classes.


On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:
Reply all
Reply to author
Forward
0 new messages