來自指令

Question

的角度變化變量

我正在嘗試創建類似於帶有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，我希望能夠像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 
      }); 
     } 
    }; 
}); 

但問題是，theHover變量不改變到控制器，當我嘗試用scope.theHover = elem.attr("id");指令內部去改變它。

以及第二個問題，我有是，如果我在一個<li>這是一個孩子的<ul>懸停時，的mouseenter不會傳播到<ul>。

有沒有辦法讓它傳播給父母，並且有沒有辦法將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>工作