javascript - 来自指令的 Angular 变化变量

Question

我正在尝试使用 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我想作为可放置的工作，当你将鼠标悬停在它上面时，从 id 获取 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"); 更改它时，变量不会更改为 Controller 在指令中。

我遇到的第二个问题是，如果我将鼠标悬停在 <li> 上这是<ul>的 child , mouseenter 不会传播到 <ul> .

有没有办法让它传播到父级，有没有办法将 theHover from 指令更改为 Controller ？

提前谢谢你，丹尼尔!

Answer 1

由于您正在更新 DOM 事件中的变量:elem.bind('mouseenter', function() {...} Angular 不知道变量已经改变。为了让它知道，请将您的代码包装在 $apply 中像这样:

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

然后你的 Controller 可以观察到 theHover 的变化像这样:

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

Demo fiddle - 使用 mouseenter 处理完整的 <ul>