Calling destroy throws exception

[floydqwz]

The following code in the jqyouiDraggable directive throws an exception:

element.on('$destroy', function() {
element.draggable('destroy');
});

The exception thrown:

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

Removing the block of code above solves the problem for me.

[codef0rmer]

@floydqwz: That snippet is required to avoid memory/dom leaks when an element is no longer available. I think I instantiate the draggable only if the data-drag set to true so while destroying the non instantiated draggable throwing that error.

Can we check if the draggable is instantiated for the element and then only destroy it? If yes, would you mind sending a PR?

[floydqwz]

On my example page I have four elements with data-drag set to true. I get destroy for all of them but the call fails anyway. So I think it's either 1) The wrong method being invoked. Is is 'destroy'? or 2) Is it too late to call destroy at the point where '$destroy' is called?

[codef0rmer]

The method is right. Can you share a demo for me look at?

On Thu, Jun 26, 2014 at 5:21 PM, floydqwz [email protected] wrote:

On my example page I have four elements with data-drag set to true. I get
destroy for all of them but the call fails anyway. So I think it's either

1. The wrong method being invoked. Is is 'destroy'? or 2) Is it too late to
   call destroy at the point where '$destroy' is called?

Reply to this email directly or view it on GitHub
#110 (comment)
.

With RegardsAmit Gharat
http://amitgharat.wordpress.com/

The luckiest person is one whose passion and profession are the same. *
*--------------------------------------------Q: Why is this email five
sentences or less?A: http://five.sentenc.es http://five.sentenc.es

[floydqwz]

Tried to create one: http://plnkr.co/edit/A7jRstyPg6LjYGMwld0Y?p=preview
But here $destroy is never called so the code works.

[KylePDavis]

I can confirm this issue w/ AngularJS v1.3.0-beta14 as well.

In AngularJS v1.2.19 when the $destroy event gets called there is a jQuery instance attached to element.

With AngularJS v1.3.0-beta14 when the $destroy event gets called there is not a jQuery instance attached to the element.

[KylePDavis]

I think I got the plunkr that @floydqwz started working and demonstrating the issue:

• http://plnkr.co/edit/RyYF3KjWaH4jZ1daMQTU?p=preview

In my case I was able work around the issue by including jQuery, jQueryUI, and then AngularJS.
Using jQuery, AngularJS, and then jQueryUI does NOT work as expected (and does throw the error mentioned above).

I suspect that there's a deeper issue that we need to look into so that it can be fixed or at least ensure that it's given the proper attention in the appropriate documentation.

[kfiil]

The "solution" mentioned by @KylePDavis worked for my too. Thanks!!

[dgrad]

the fix from @KylePDavis worked for me during testing, but in a production build where jquery, jqueryui and angularjs are all concatenated and minified together, it no longer works (even though the order is the same).

[nhatquang238]

I'm having the same problem as @dgrad since my production build minifies and includes everything. Hence I have to decouple my production build and require jquery, jquery-ui, angular from cnd source to force it to work. Any official fix on this?

[codef0rmer]

Duplicate of #117