带有 JqueryUI、dragover 和 ng-show 的 AngularJS 问题

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>

问题在于，当可拖动对象位于仅在拖动过程中可见的可放置对象上方时，不会触发“拖动”事件。要触发事件，你必须拖出窗口创建一个滚动条，然后触发事件。

我注意到问题是由于 JqueryUI (here) 的可放置元素不是“可见”这一事实引起的，因此不会触发该事件。

你知道我如何“更新”元素来设置新的可见性吗？我应该在 AngularJS 项目上打开一个问题吗？

谢谢！

Answer 1

考虑使用 mousedown、mousemove 和 mouseup 事件来改变 droppable 的可见性，draggable.directive.js 的新定义如下：

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();
  }
});