AngularJS event binding in directive template doesnt work if mouseout used, but works with mouseover

Question

It seems to be some SIMPLE PROBLEM but I am looking on it for some hours and cannot find the answer. Why mouseout or mouseleave doesnt work where mouseover works? Here is the code:

HTML:

<div ng-app="test">
    <div class="testdiv" data-test-mouseout=""></div>
</div>

CSS (not important in this case I suppose):

.testdiv {
    width: 100px;
    height: 50px;
    margin: 25px;
    background: yellow;
    position: relative;
}
.testHere {
    position: absolute;
    padding: 0;
    margin: 0;
    background: red;
    width: 100%;
    height: 10px;
    top: -5px;
    left: 0px;
}

JS:

var app = angular.module('test', []);
app.directive('testMouseout', function ($compile) {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseover', function () {
                iElement.html('<div data-test-mouseout-here="" class="testHere">        </div>');
                $compile(iElement.contents())(scope);
            });
        }
    };
});
app.directive('testMouseoutHere', function () {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseout', function (e) {
                e.target.style.backgroundColor = 'blue';
                console.log('mouseout');
            });
        }
    };
});

Ok, what it supposed to do? It will display yellow div 100x50px and when you mouseover it, then new red div appear inside as an child. This red div has mouseout binding so it should console.log "mouseout", but it doesnt happened. BUT if you raplace mouseout by mouseover in second directive, it works. Thats weird.

I was trying to put ngMouseout/ngMouseleave into template inside first directive, but same problem. ngMouseout/ngMouseleave didnt work ngMouseover worked.

Here is fiddle:http://jsfiddle.net/rGAqw/

Same in plunker:http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

Answer 1

The "mouseover" event for the "yellow" or containing box is taking precedence, the "red" box keeps getting recreated because your mouse is moving over the yellow box still, therefore you never get a chance to leave the red box. If you change your testMouseoutHere directive to bind to "mouseover" you'll see that it is working, but when you change it back to "mouseout" or "mouseleave" nothing happens. If you unbind to the "mouseover" event in the "yellow" box, then it will work.

iElement.bind('mouseover', function () {
    iElement.html('<div data-test-mouseout-here="" class="testHere"></div>');
    $compile(iElement.contents())(scope);

    iElement.unbind('mouseover');
});

http://jsfiddle.net/rGAqw/2/