ng-repeat中的AngularJS指令

Question

I'm creating a drag & drop directive in AngularJS. I'm having problems with my directive being inside an ng-repeat .

The problem is that when I drag my element onto a droppable div, it always takes the last element from the list. If I drag the first one in the list it still takes the last one being dropped. This is my 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>

Finally I have a simple directive as follows:

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

Just to be clear, scope.pushObject is always the last item in the ng-repeat and not the item being dragged.

Answer 1

You could access the scope of each item being dragged like this:

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

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

Then you wouldn't need pushObject on the directive scope.

http://plnkr.co/eo7zCRu0JA1mLdVekGiK