Not working with jqLite properly

[gauravjhs]

I am facing a problem in using this with jqLite. It throws an error message as "'ui.sortable: jQuery should be included before AngularJS!'".

For resolving this, I just followed these steps:

1. Wrapped element with jQuery, like - element = $(element);
2. Checked that element is jQuery instance or not : if ((!angular.element.fn || !angular.element.fn.jquery) && !(element instanceof jQuery)) { $log.error('ui.sortable: jQuery should be included before AngularJS!'); return; }

[thgreasi]

Hi there. What version of the lib are you using? In the latest version, we already log a message when jQuery is not used by angular.

[gauravjhs]

Hi,

You are logging the message and returning. That's why the functionality will not work. As jqLite is faster, we force Angular to use it. In case we require any directive to use jquery, we wrap element in a jquery object.

Suggestion to resolve this: Check if jquery is present and if element is not Jquery object then wrap it in Jquery.

Hope I am able to make sense on this.

[thgreasi]

Oh, needed a second read on this. Allowing jQuery to be loaded after Angular is a big NO from my side and we intentionally do not use the workaround you mentioned. We need to load jQuery before Angular so that Angular uses it for its DOM manipulations with angular.element. This way we ensure that any DOM removal will follow the jQuery DOM tear-down procedure, properly cleaning any .data() stored on the elements and any jQuery plugins instantiated on them and their descendants.

[thgreasi]

Moreover, as discussed in other issues I would discourage any approach where angular.element is patched with jQuery after the page loads (eg: angulat.element = $;), since: 1 jqlite has some extra methods that need to be patched on top of the jQuery (this is done automatically when jQuery is loaded before Angular) 2 we can't be sure that changing and patching angualr.element will work 100% as intended (and memory leaks are a big deal).

[gauravjhs]

We are loading Jquery before Angular but forcing it to use jqLite using ngJq tag.

[thgreasi]

Despite of that, we still need to have angular to use jquery so that angular properly clears removed DOM elements and releases objects & plugins associated with them. A possible implementation would require doing the DOM clearing manually when something like $destroy is called. This should need a lot of testing to ensure that there are no memory leaks and the same approach should also be implemented on every directive that an application uses. Is ui-sortable the only plug-in wrapper directive that you use?

Note that the ngJq tag was initially created for those that use jQuery.noConflict and have it aliased on a different variable name. The preference of the Angular team on using jQuery whenever available (instead of jQLite) is quite obvious (I think) by the fact that it's the default

Angular behavior.

Thodoris Greasidis Computer, Networking & Communications Engineer

[thgreasi]

Here is a proof of concept branch and a proof of concept codepen example that would need a lot of testing.

[sddsdei]

Same issue :-1:

I am facing a problem in using this with jqLite. It throws an error message as "'ui.sortable: jQuery should be included before AngularJS!'".

Checked that element is jQuery instance or not : if ((!angular.element.fn || !angular.element.fn.jquery) && !(element instanceof jQuery)) { $log.error('ui.sortable: jQuery should be included before AngularJS!'); return; }

[thgreasi]

Have you tried loading jQuery before angularjs, as demonstrated in all the provided examples? Is that so big change for your app?

[sddsdei]

@thgreasi I have tried to load jQuery before angularjs but same problem import jquery from 'jquery'; import angular from 'angular';

:(

[thgreasi]

What's the order of the actual

[sddsdei]

I am using AngularJS Starter repo for Angular + ES6 + (Webpack or JSPM)

[sddsdei]

Any help

[thgreasi]

Please take a look at #478 and webpack's module shimming and keep in mind that jquery should be imported before angularjs in your entry point module. I would also prefer to move this discussion over to #478.

[sddsdei]

Not working, Why i have to use jquery if i am using angular. I thing this wrong library to use in angular project. I have to use another option or have to build own.