Mouse directives behave strangely in nested AngularJS environment

Question!

I was trying to implement a nested tree structure in AngularJS. It consists of nodes which all get managed by the same controller type. You can find an example here: http://jsfiddle.net/Yfmdy/2/

My problem is, that everytime a child node gets deleted and its parent's "children" array gets modified, all parents lose their ng-mouseenter and ng-mouseleave behaviors.

Has anyone an idea what to do about that? Have I missed something?



Answers

Use $browser.defer to emit $childDeleted event.
Set current element css to display: none; and force execute ng-mouseleave.

Example here: http://jsfiddle.net/Ticore/Yfmdy/11/



Actually, it's a bug of browser javascript.

JavaScript MouseOver/Out event inconsist.

Pure js example here http://jsfiddle.net/GbuNn/6/





This video can help you solving your question :)
By: admin