Not compatible with angular 1.3-beta

[antoinepairet]

Using
angular 1.3-beta.15
jQuery 2.1.1
jQueryUI 1.9.1
ngDragDrop 1.0.7

Loading the page and using the drag-drop feature is not an issue until a route change is performed. The following error is fired:

Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy':

Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy'
at Function.jQuery.extend.error (http://localhost:9000/bower_components/jquery/dist/jquery.js:250:9)
at HTMLDivElement. (http://localhost:9000/bower_components/jquery-ui/ui/jquery-ui.js:487:15)
at Function.jQuery.extend.each (http://localhost:9000/bower_components/jquery/dist/jquery.js:375:23)
at jQuery.fn.jQuery.each (http://localhost:9000/bower_components/jquery/dist/jquery.js:139:17)
at $.fn.(anonymous function) as draggable
at HTMLDivElement. (http://localhost:9000/bower_components/angular-dragdrop/src/angular-dragdrop.js:278:19)
at HTMLDivElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4409:9)
at HTMLDivElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4095:28)
at Object.jQuery.event.trigger (http://localhost:9000/bower_components/jquery/dist/jquery.js:4324:12)
at jQuery.fn.extend.triggerHandler (http://localhost:9000/bower_components/jquery/dist/jquery.js:4881:24) angular.js:10264
(anonymous function) angular.js:10264
(anonymous function) angular.js:7506
Scope.$digest angular.js:12654
Scope.$apply angular.js:12873
(anonymous function) angular.js:10052
jQuery.event.dispatch jquery.js:4409
elemData.handle jquery.js:4095

[laplantb]

also not compatible with angular 1.3.rc-3

[theblang]

@codef0rmer , any plans to become 1.3 compatible?

[neilhem]

👍 for Angularjs 1.3 compatibility

[codef0rmer]

Does anybody have a demo to state a problem? For me, it works even with 1.3+

[laplantb]

I found the cause : inserting the script jquery.ui.js after angular.js cause the issue in 1.3 but not 1.2. Specially if the drag or drop directive is used with ngRepeat. On removing the element by $animate.leave , the drag or drop plugin get destroyed by the 'remove' event before the $destroy event.

Play way this forked Demo: http://plnkr.co/edit/uiwZhsSmdtDebB4ZaRWT

[codef0rmer]

@laplantb: This was even existed for 1.2 when routing is in action. However, I'm not sure if that's angular's version issue. Today I fixed the similar issue with an hack and probably release a new version soon.

[laplantb]

I was using this hack :

element.on('$destroy', function() {
if(element.data('droppable')){
element.droppable('destroy');
}
});


[codef0rmer]

@laplantb: This element.data('draggable') always returns undefined for me even if draggable was initialized.

[laplantb]

Sorry I used the same logic as jqueryui before it throws the exception (look around line 507 of jqueryui.js (1,11,1)). I assumed $.data is used for public access but was wrong. If you look at line 502, element.draggable('instance') would return the instance. I dunno if it works with old versions of jqueryui though.

[codef0rmer]

@laplantb: I noticed that the draggable/droppable was initialized but still throwing the error on destroy. That's why I call it a hack :-)