“ Cannot read property 'then' of undefined” in angular drag n drop
Question
I am trying to use angular drag and drop http://codef0rmer.github.io/angular-dragdrop , but when I am trying a basic example, i am getting the error. My code -
<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>
Can someone help me with same.?? I have tried using same different versions of angular and also tried copying angular version from the actual site example but still facing same error
Thanks, Ray
1 answers
solution1
0 ACCPTED 2015-10-24 13:33:40
The beforeDrop function should return a promise ( documentation ).
The plugin executes your beforeDrop , where you would typically ask the user for confirmation, and then it "drops" (or not).
As you are not waiting for user input, to get rid of the error you could inject $q and return the dummiest promise, so to speak:
$scope.beforeDrop = function () {
console.log('Before dropping..!!');
return $q.when();
}
But the final look of beforeDrop will be more like:
$scope.beforeDrop = function () {
// open modal
// ...
return modalPromise;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.