javascript - 指令的 Angular 变化变量

我试图用angularJS创建类似于Google日历的日历，但遇到了问题。我在屏幕上添加了事件，并且我的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，我想将其用作可放置的对象，并且当您将鼠标悬停在其上时，也可以从id的<ul>获取ID。到目前为止，我是这样做到的

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>上，则mouseenter不会传播到<ul>。

有没有办法使它传播到父级，有没有办法将theHover从指令更改为控制器？

提前谢谢你，丹尼尔！

最佳答案

由于您是在DOM事件中更新变量，因此：elem.bind('mouseenter', function() {...} Angular不知道变量已更改。为了使其醒目，将代码包装在$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-鼠标进入完整的<ul>