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，我希望它可以作为droppable使用，当你将鼠标悬停在它上面时，也可以从id的{{1}}获取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");的{{1}}上，则鼠标中心不会传播到<li>。

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

先谢谢你，丹尼尔！

Answer 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>

指令的角度变化变量

1 个答案: