指令的角度变化变量

Question

i am trying to create a calendar similar to google calendar with angularJS and i got into a problem. I added the events on the screen and my html looks like this

<ul drop-event id="0">
    <li move-event></li>
</ul>
<ul drop-event id="1">
    <li move-event></li>
</ul>

.. and so on 42 boxes to show 1 month. I created a directive drop-event which i would like to work as droppable and also when you hover mouse on it, to get the id from the id of the <ul> . So far i did it like this

myApp.directive('dropEvent', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.bind('mouseenter', function() {
                scope.theHover = elem.attr("id");
            });

            elem.droppable({ tolerance: "pointer" });

            elem.bind('drop', function(event, ui) {
                // future stuff
            });
        }
    };
});

but the problem is that the theHover variable does not change into the controller when i try to change it with scope.theHover = elem.attr("id"); inside the directive.

And the second problem i have is that if i hover on a <li> which is a child to the <ul> , the mouseenter does not propagate to the <ul> .

Is there a way to make it propagate to the parent, and is there a way to change the theHover from directive into the controller ?

Thank you in advance, Daniel!

Answer 1

Since you're updating the variable inside a DOM event: elem.bind('mouseenter', function() {...} Angular doesn't know that the variable has changed. To make it aware, wrap your code in an $apply like this:

scope.$apply(function() {
   scope.theHover = elem.attr("id");
});

Then your controller can watch for changes to theHover like this:

myApp.controller('myCtrl', function ($scope) {
    $scope.$watch('theHover', function (newValue,oldValue) {
       console.log("hover ",newValue);
    });
});

Demo fiddle - with the mouseenter working on the full <ul>