Wijmo wj树视图angularjs放置等待$http回调

我正在使用Wijmo树视图

我试图通过服务器端验证实现拖放功能，但无法通过服务器端调用等待成功或失败

这是我的Html

<wj-tree-view control="tv" items-source="data.DeviceInstance"
              display-member-path="'Name'"
              child-items-path="'Children'"
              lazy-load-function="ExpandTreeItemSelected"
              format-item="FormatTreeData(s, e)"
              allow-Dragging="true"
              drop="Drop(s,e)"
              drag-over="dragOver(s,e)">
</wj-tree-view>

---

设置e.cancel会导致移动失败，但如何让它等待http请求呢。如果甚至接受了一个返回，我可以返回http请求的承诺，但它基于参数的属性，理论上，如果不调用线程睡眠调用，就不能要求异步事件在另一个异步操作中等待另一个异步操作。我还想你不会赞成的。下面是我的建议，关于drop操作，调用http操作并取消drop操作。同时，将事件参数传递给http操作，并在http响应回调中手动引发相同的drop操作。这是一把小提琴：

JS

HTML

    $scope.Drop = function (s, e) {
        console.log(e);
        $http({
            url: NavMenuSelectionFac.AjaxURL("DeviceInstance/DeviceInstance/MoveDeviceInstance"),
            cache: false,
            method: 'POST',
            data: { "deviceInstanceToMove": e._src.dataItem, "NewParentPK": e._tgt.dataItem.pk },
            responseType: 'JSON',
        }).then(function (response) {
            if (response.data.Result === 1) {
                Notification.success(response.data.Message);  
                e.cancel = false;
            }
            else {
                Notification.error(response.data.Message);
                e.cancel = true;

            }
        }, function (response) {
            //TODO : Something here
        });
    }; 

  $scope.dragStartFunction=function(s, e) {
    if (e && e.node && e.node.hasChildren) {
    if (!document.getElementById('allowDraggingParentNodes').checked) {
      e.cancel = true; // prevent dragging parent nodes
      } else {
      e.node.isCollapsed = true; // collapse parent nodes when dragging
      }
    }
};

$scope.dragOverFunction= function(s, e) {
    if (!document.getElementById('allowDroppingIntoEmpty').checked &&
    !e.dropTarget.hasChildren &&
    e.position == wijmo.nav.DropPosition.Into) {
        e.position = wijmo.nav.DropPosition.Before;
      }
};

$scope.dropFunction=function(s,e){
if(e.cancel){
  return;
}
  var args=new wijmo.nav.TreeNodeDragDropEventArgs(e.dragSource,e.dropTarget,e.position);

  if(!e.again){
    args.again=true;
        //async call
     $http({
     url:"https://my.api.mockaroo.com/random_validate.json?key=8c9c7af0",
     cache:false,
     method:"GET",
     responseType:"JSON"
     }).then((response)=>{
        //check async validation
      //note that arrow function is used in then callback, use bind() method if you don't want to use arrow functions
        if(response.data.result === true){
        //validation success
        console.log("validation succeed\ncontinue with event");
        args.cancel=false;
      }
      else{
        //validation fails
        //stop event
        console.log("validation failed\ncancel event");
        args.cancel=true;
      }

        s.onDrop(args);
     }).catch(function(err){
        console.log(err);
     });
  }
  else{
    //do something that needs to be done in case of successful validation
    console.log("raised after asyn validation success ");
    var draggedItem=e.dragSource.dataItem;
    e.dragSource.itemsSource.splice(e.dragSource.index,1);
    e.dropTarget.itemsSource.splice(e.dropTarget.index,0,draggedItem);
    s.loadTree();
  }

  //cancel default event 
  e.cancel=true;

  }

<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">  
   <wj-tree-view items-source="data"
              display-member-path="header"
              child-items-path="'items'"
              allow-Dragging="true"
              drag-start="dragStartFunction(s,e)"
              drag-over="dragOverFunction(s,e)"
              drop="dropFunction(s,e)"
               >
  </wj-tree-view>
</div>