1

我在使用角度时遇到问题：

http://jsfiddle.net/EpxHE/14/light/

这是我做的：

指示：

.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() 函数仅在创建元素之前调用一次。你有解决方案吗 ？谢谢

4

1 回答 1

4

我做了一些与您尝试做的非常相似的事情。但是，我没有在指令的 compile 函数中，而是将 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 的博客文章中了解了如何做到这一点。

您还可以看到我是如何做到的，发布在我的GithHub 存储库中。

于 2013-07-17T03:01:39.363 回答