AngularJS with JqueryUI、dragoverおよびng-show問題

Question

AngularJSおよびJqueryUIで作業中に問題が発生しました。here is a demo。

angular.module("app").directive("draggable", function($timeout) { 
    [...] 
    function link(scope, element, attrs) { 
    element.draggable({ 
     start: function() { 
     $timeout(function() { 
      scope.setDisplay(true); 
     }); 
     }, 
     stop: function() { 
     $timeout(function() { 
      scope.setDisplay(false); 
     }); 
     } 
    }); 
    } 
}); 

angular.module("app").directive("dragover", function($timeout) { 
    [...] 
    function link(scope, element, attrs) { 
    element.droppable({ 
     over: function(event, ui) { 
     $timeout(scope.dragover); 
     } 
    }); 
    } 
}); 

<div ng-app="app" id="container" ng-controller="ctrl"> 
    <div id="counter">{{overedCounter}}</div> 
    <div id="draggable" draggable></div> 
    <div id="droppable" ng-show="display" dragover="overed"></div> 
</div> 

問題は、ドラッグのみドラッグ中に表示されるドロップ可能上にあるときに「のdragover」イベントがトリガされないことです。イベントを発生させるには、スクロールバーを作成するためにウィンドウの外にドラッグしなければなりません。イベントが発生すると、イベントが発生します。

この問題は、JqueryUI（here）でdroppable要素が「可視」でないために発生しているため、イベントは発生しません。

新しい可視性を設定するために要素を「更新」する方法がわかっていますか？ AngularJSプロジェクトで問題を開くべきでしょうか？

ありがとうございます！

Answer 1

次のようにマウスダウン、のMouseMoveの使用を検討し、代わりにドロップ可能可視性を変更するには、イベントをMouseUpイベント、draggable.directive.jsの新しいdefenitionが行く：

angular.module("app").directive("draggable", function($timeout){ 
    var directive = { 
    restrict: 'A', 
    link: link 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
    element.mousedown(function(){ 
     element.data("mousedown", 1); 
    }); 

    element.mousemove(function(){ 
     if(element.data("mousedown") == 1){ 
      scope.setDisplay(true); 
      scope.$digest(); 
     } 
    }); 

    element.mouseup(function(){ 
     element.removeData("mousedown"); 
     scope.setDisplay(false); 
     scope.$digest(); 
    }); 

    element.draggable(); 
    } 
});