переменная углового изменения из директивы

Question

Я пытаюсь создать календарь, похожий на календарь Google с помощью angularJS, и у меня возникла проблема. Я добавил события на экране, и мой HTML выглядит следующим образом

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

.. и так далее 42 коробок показать 1 месяц. Я создал директиву drop-event, который хотел бы работать как droppable, а также когда вы наводите курсор мыши на него, чтобы получить идентификатор от id<ul>. До сих пор я сделал это, как этот

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 
      }); 
     } 
    }; 
}); 

, но проблема в том, что переменная theHover не изменяется в контроллер, когда я пытаюсь изменить его с scope.theHover = elem.attr("id"); внутри директивы.

И вторая проблема заключается в том, что если я нахожусь на <li>, который является дочерним по отношению к <ul>, мышь не распространяется на <ul>.

Есть ли способ распространить его на родителя, и есть ли способ изменить theHover из директивы в контроллер?

Заранее спасибо, Даниэль!

Answer 1

Поскольку вы обновляете переменную внутри события DOM: elem.bind('mouseenter', function() {...} Угловой не знает, что переменная изменилась. Чтобы сделать это известно, обернуть свой код в $apply, как это:

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

Затем контроллер может наблюдать за изменениями в theHover так:

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

Demo fiddle - с MouseEnter работает на полную <ul>