ng-repeat中的AngularJS指令

Question

我正在AngularJS中創建拖放指令。 我的directive位於ng-repeat內時遇到問題。

問題是，當我將元素拖動到可放置div時，它總是從列表中獲取最后一個元素。 如果我將列表中的第一個拖動，它將仍然刪除最后一個。 這是我的HTML：

<li ng-repeat="data in source">
   <div draggable="#divDrop" drop-model="otherList" push-object="data">
      {{data.name}} {{data.price}}
   </div>
</li>

<div id="divDrop" class="alert alert-info">Drag your data into this box</div>

最后，我有一個簡單的指令，如下所示：

app.directive('draggable', function($timeout) {
            return {
                scope: {
                    dropModel: '=',
                    pushObject: '='
                },
                link: function (scope, element, attrs) {
                    $timeout(function () {
                        var draggableEl = attrs.draggable;

                        $(draggableEl).droppable({
                            drop: function (event, ui) {
                                scope.dropModel.push(scope.pushObject);
                                scope.$apply();
                            }
                        });

                        $(element).draggable({
                            revert: true,
                            revertDuration: 0
                        });
                    });
                }
            };
        });

需要明確的是， scope.pushObject始終是ng-repeat的最后一個項目，而不是被拖動的項目。

Answer 1

您可以像這樣訪問要拖動的每個項目的范圍：

drop: function (event, ui) {
    var data = $(ui.draggable).scope().data;

    scope.dropModel.push(data);
    scope.$apply();
}

這樣，您就不需要指令范圍內的pushObject 。

http://plnkr.co/eo7zCRu0JA1mLdVekGiK