ng-class not work when dynamicly change the property in the directive

[庄有根]

code is here: http://jsfiddle.net/yougen/duUsr/

<div class="state-box" ng-class="{dealOver:dealOver,dealOut:dealOut}"></div>

I change the dealOver and dealOut in the directive when mouseenter and mouseleave event fire. But it looks like the property not change.

PS: in the beginning, I want to change the style directly, but I don't know how to get the div.state-box element in the directive.

[umi]

Your fiddle isn't setup correctly because you haven't defined a module. Looking at the code though, I think you just need a scope.$apply() at the end of your 'mouseenter' and 'mouseleave' handlers.

[umi]

Sorry, posted the wrong link. You can use the ngMouseenter and ngMouseleave directives instead to avoid binding handlers yourself:

http://jsfiddle.net/9FDpy/

[bluezyg]

Sorry for the wrong code. I have update the code. scope.$apply() will work. thanks.

BTW, does it possible to get child element in the directive? For the doc, angular.element only support finding element by tag name. How can I get the <div class="state-box"> element?

2013/9/18 umi <umairfr...@gmail.com>

Actually you don't need to bind these yourself as angular provides ngMouseEnter and ngMouseLeave directives.

See a fork of your code:

http://jsfiddle.net/8aSJX/

On Tuesday, September 17, 2013 11:00:31 PM UTC-4, umi wrote:

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LlcQ-KxJLaE/unsubscribe.
To unsubscribe from this group and all its topics, 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.
For more options, visit https://groups.google.com/groups/opt_out.

[umi]

If you're using jQuery, and include it before angular, element will be augmented with the full range of jQuery selectors and functions.