如何在 angular ui 可排序回调中等待确认对话框

Question

我正在使用 angular ui sortable 在列表之间拖放项目。我希望能够做的是（在某些 drag/drop 条件下）有一个确认对话框，如果用户取消该对话框，则将列表恢复为原始状态。我可以在更新事件中使用 ui.item.sortable.cancel() 方法，但是如果我使用 returns 承诺的模式，我不知道如何在取消时恢复列表。这是我控制器中的内容（modalService 是 bootstrap $uibModal）：

$scope.sortableOptions =
        handle: ' > span > span > .task-drag-icon',
        connectWith: ".task-subset"
        placeholder: "sortable-placeholder",
        forcePlaceholderSize: true,
        update: (e, ui) ->
          if ui.item.sortable.sourceModel == ui.item.sortable.droptargetModel #sort was within the same list
            #some other logic here.....
          else
            droptarget_element = ui.item.sortable.droptarget

            if droptarget_element.attr('ng-model') == "task.subTasks"
              #need the user to confirm here if they really want to do this drag/drop
              modalOptions =
                closeButtonText: 'Cancel'
                actionButtonText: 'Make SubTask'
                headerText: 'Make SubTask?'
                bodyText: 'This action will remove any existing task groups as it will become a child task. Is this OK?'
              modalService.showModal({}, modalOptions).then (result) ->
                  console.log "accpted"
                , () ->
                  console.log "cancelled"
                  #need to call ui.item.sortable.cancel() here, but I cant because the update callback has finished already!!!!

              console.log "finished - gets to here immediately as modalService is asyncronous"

          return

感谢任何建议。

Answer 1

如果没有一些重大的黑客攻击，我无法让它工作，所以我最终没有在更新回调中使用 cancel() 方法，而是将适当数组中的数据恢复到它们在 eth 中的状态通过分配一些变量来停止回调：

    $scope.sortableOptions =
        handle: ' > span > span > .task-drag-icon',
        connectWith: ".task-subset"
        placeholder: "sortable-placeholder",
        forcePlaceholderSize: true,
        stop: (e, ui) ->
          orig_index = ui.item.sortable.index
          new_idex = ui.item.sortable.dropindex
          sourceModel = ui.item.sortable.sourceModel
          droptargetModel = ui.item.sortable.droptargetModel
          model = ui.item.sortable.model

          if sourceModel == droptargetModel #sort was within the same list
            #some other logic here.....
          else
            droptarget_element = ui.item.sortable.droptarget

            if droptarget_element.attr('ng-model') == "task.subTasks"
              #need the user to confirm here if they really want to do this drag/drop
              modalOptions =
                closeButtonText: 'Cancel'
                actionButtonText: 'Make SubTask'
                headerText: 'Make SubTask?'
                bodyText: 'This action will remove any existing task groups as it will become a child task. Is this OK?'
              modalService.showModal({}, modalOptions).then (result) ->
                  console.log "accpted"
                , () ->
                  #put model back in orginal poisition
                  sourceModel.splice orig_index, 0, model
                  #remove from target array
                  droptargetModel.splice new_idex, 1

          return

如何在 angular ui 可排序回调中等待确认对话框

How to wait for confirm dialog inside angular ui sortable callback

jquery-ui-sortable

angularjs

bootstrap-modal

angular-ui-sortable