角度拖放中的“无法读取未定义的属性‘然后’”答案

【问题标题】：" Cannot read property 'then' of undefined" in angular drag n drop角度拖放中的“无法读取未定义的属性‘然后’”
【发布时间】：2015-10-24 13:26:08
【问题描述】：

我正在尝试使用角度拖放http://codef0rmer.github.io/angular-dragdrop，但是当我尝试一个基本示例时，我得到了错误。我的代码 -

<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
    <style>
        table, th , td  {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
    </style>
    <html  ng-app="myApp">
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css" rel="stylesheet" />

        <div ng-controller="dragDropController">
            <div class="row-fluid">
                <div class="span6">
                  <div class="btn btn-primary" data-drag="true" ng-model="list" jqyoui-draggable="{animate: true}">{{list.title}}</div>
                </div>
                <div class="span6">
                  <div class="thumbnail" data-drop="true" ng-model="droppedList" jqyoui-droppable="{beforeDrop: 'beforeDrop'}"></div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
        <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
        <script src="{!$Resource.AngularDragDrop}" />
        <script>
            angular.module('myApp', ['ngDragDrop']).controller('dragDropController', function($scope, $http) {
                $scope.list = {title : 'Drag me..!!'}
                $scope.droppedList = {title: 'Drop place'};
                $scope.beforeDrop = function() {
                    console.log('Before dropping..!!');
                };
            });

        </script>
    </html>

</apex:page>

有人可以帮我做同样的事情吗？？我尝试过使用相同的不同版本的角度，也尝试从实际站点示例中复制角度版本，但仍然面临同样的错误

谢谢，雷

【问题讨论】：

<script src="{!$Resource.AngularDragDrop}" />脚本标签不能自闭
这不是问题
这是问题之一

标签： javascript angularjs drag-and-drop

【解决方案1】：

beforeDrop 函数应该返回一个承诺 (documentation)。

插件会执行您的beforeDrop，您通常会在该处要求用户确认，然后然后它“放弃”（或不放弃）。

由于您不等待用户输入，为了摆脱错误，您可以注入 $q 并返回最愚蠢的承诺，可以这么说：

$scope.beforeDrop = function () {
    console.log('Before dropping..!!');
    return $q.when();
}

但是beforeDrop最终的样子会更像：

$scope.beforeDrop = function () {
    // open modal
    // ...
    return modalPromise;
}

【讨论】：