Question

我在使用angular进行此操作时遇到问题：

这就是我所做的：

指令：

.directive("myDirective", function () {
        return {
            restrict: "A",
            replace: true,
            compile: function (element, attrs) {
                var $newDiv = $("<div class='dragdiv'>4</div>");
                makeElementAsDragAndDrop($newDiv);
                element.html($newDiv);
            }
        }

    })

function makeElementAsDragAndDrop(elem) {
    $(elem).draggable({
        snap: '#droppable',
        snapMode: 'outer',
        revert: "invalid",
        cursor: "move",
        helper: "clone"
    });
    $(elem).droppable({
        drop: function(event, ui) {
            var $dragElem = $(ui.draggable).clone().replaceAll(this);
            $(this).replaceAll(ui.draggable);
            makeElementAsDragAndDrop(this);
            makeElementAsDragAndDrop($dragElem);
        }
    });
}

HTML：

<div my-directive ng-repeat="item in items"></div>

我认为问题是因为makeElementAsDragAndDrop（）函数只在调用元素之前调用一次。你有解决方案吗？感谢

Answer 1

我做了一些非常类似于你尝试做的事情。但是，我不是在我的指令编译函数中，而是将jquery ui小部件附加到我的链接函数中的指令元素，如下所示：

app.directive('sortable', function() {
  return {
    restrict: 'A',
    link: function(scope, elt, attrs) {
      return elt.sortable({
        revert: true,
        stop: function(evt, ui) {
          return scope.$apply(function() {
            /* code goes here */
          });
        }
      });
    }
  };
});

请注意，在我的可排序小部件上定义stop事件后，我立即调用scope.$apply。 Misko Hevery将其描述为回到Angular execution context。

我从Ben Farrell's blog post找到了如何做到这一点。

你也可以看到我是如何做到的，发布在我的GithHub repo。

使用jqueryUI angularJS拖放指令

1 个答案: