指令的角度变化变量答案

【问题标题】：angular change variable from directive指令的角度变化变量
【发布时间】：2013-12-21 18:19:30
【问题描述】：

我正在尝试使用 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工作，并且当你将鼠标悬停在它上面时，可以从<ul>的id获取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
            });
        }
    };
});

但问题是当我尝试在指令中使用scope.theHover = elem.attr("id"); 更改它时，theHover 变量不会更改为控制器。

我遇到的第二个问题是，如果我将鼠标悬停在 <li> 上，它是 <ul> 的孩子，mouseenter 不会传播到 <ul>。

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

提前谢谢你，丹尼尔！

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

由于您在 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 - 使用 mouseenter 处理完整的<ul>

【讨论】：