Angular拖放onDrop回调方法问题

时间:2015-11-10 02:03:07

标签: angularjs drag-and-drop

嘿,我对Angular很新。为了创建包含拖放功能的网页游戏,我使用了this。这是我在html中的代码的一部分:

<div class="bucket"
     data-drop="true"
     data-jqyoui-options
     jqyoui-droppable="{onDrop:'onDrop'}"
     >
</div>
控制器中的

$scope.alienData = [];

// Initialization of $scope.alienData
for (var i = 0; i < 3; i++) {
    $scope.alienData[i].push({alien:i, bucket:null});
};


//Add the bucket id to the corresponding alien
$scope.onDrop = function(event, ui) {
    var alienId = ui.draggable.attr('id');
    var bucketId = $(event.target).parent().attr('id');

    // Note that $scope.alienData is a list looks like this: 
    //[{alien:0, bucket:null}, {alien:1, bucket:null}, {alien:2, bucket:null}]
    $scope.alienData[alienId].bucket= bucketId;

    // HERE I got the correct bucketId printed
    alert($scope.alienData[alienId].bucket);
};

// This function is called by ng-click on the alien, click is happend after I dropped alien in the bucket
$scope.putBackAlien = function(alienId) {
    // HERE is where I check the list and got null value 
    alert($scope.alienData[alienId].bucket);
    // Some other work to put back alien
    ...
};

所以基本上每当我在一个桶中拖动一个外星物品时,我想通过将bucketId添加到我拖动的外星人来修改$ scope.alienData,以便我可以稍后使用此列表中的数据。但是,我发现这只能在onDrop函数中运行良好(每次我在某个桶中拖动外星人时,会弹出带有正确bucketId的警报)。如果我在onDrop之外检查了$ scope.alienData,我找不到刚刚在onDrop函数中添加的bucketId(为null)。 关于如何解决这个问题的任何建议?感谢!!!

0 个答案:

没有答案