angular change variable from directive

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!

KayakDave · Accepted Answer · 2013-12-21 19:11:09Z

2

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>

edited Dec 21, 2013 at 19:11

answered Dec 21, 2013 at 19:00

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular change variable from directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related