Question

我正在创造一个拖累和放大器AngularJS中的drop指令。我的directive位于ng-repeat内，我遇到了问题。

问题在于，当我将元素拖到droppable 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

ng-repeat中的AngularJS指令

1 个答案: