CODEWITHSUNDEEP
jqueryangularjs
Bardelman
Bardelman

Reputation: 2298

How to use jqLite with jQuery.noConflict() to make it available with jquery

In my angular app, i'm using the angular-dragdrop module among other modules and it turns out that this module is incompatiable with the version of jquery i'm using (v3.1.1) as it was made to be working with the angular's native library jqlite (but maybe it can work with a version lower than v3.0.0). Now i'm thinking about using the jQuery.noConflict() to make two versions availables in the app but i don't want to embed a jquery version other than which i already have and find a way to use the already existing jqlite library but i don't know if it is available to be used in such as way or not and how. Thanks for your help.

************ EDIT for estus answer **************

This is the plunker for the drag & drop module that estus asked me to make to show the failure i had with the ng-jq directive (this plunker is same as in its officiel documentation example but to which i didn't only add jquery to be loaded before angular but i also i tried to reproduce my own application context so i also added jquery-ui and bootstrap to show another failure i got when i replaced every e.dataTransfer in the drag module file (draganddrop.js) with e.originalEvent.dataTransfer and this fix worked in this example but not in my own application (i also wish to know why, in my application there isn't the dataTransfer neither in the event e nor in the e.originalEvent as shown in this log capture :

enter image description here

The original fix made by the author of the drag & drop module himself was adding the dataTransfer property to jQuery.event.props but props was removed from jquery since its v3.0.0 and this is the actual reason for which the drag & drop module is incompatible with jquery versions above v3.0.0. The original fix lies in line 14 of the (draganddrop.js) which consists of the following if test:

if (window.jQuery && !window.jQuery.event.props.dataTransfer) {
   window.jQuery.event.props.push('dataTransfer');
}

You can notice that when the jquery scrpit/links are commented in the plunker example, the drag & drop works perfectly :

<!-- <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link data-require="[email protected]" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="[email protected]" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>-->

For the purpose of only testing the ng-jq directive, i will assume there is no such as fix (i'm talking about using the originalEvent fix here and not about the original fix made by the author) for the moment and let only ng-jq solve the problem by making angular use jqlite instead of jquery in both the ui-draggable which is the dragged element and the "ui-onDrop" where the drop should occur and to both of which i added the ng-jq directive but that didn't make angular use jqlite.

I guess maybe if once angular already have taken jquery instead of jqlite that it won't return to be using the latter in specific directive cases like what i'm trying with the drag & drop directives mentionned above but while making some tests it seems that the bindJQuery() function which makes that task in angular.js (of affecting jquery or jqlite to angular.element was running more than once, so maybe it's possible that every directive can choose which one of them to run with)

Upvotes: 0

Views: 435

Answers (1)

Estus Flask
Estus Flask

Reputation: 222855

jQuery.noConflict() affects window.$ and does nothing here.

angular.element will be forced to use jQuery if window.jQuery exists when Angular is being loaded. This can be avoided if angular.js is loaded before jquery.js

Alternatively, ng-jq attribute (not a real directive, as the documentation says) can be used to modify this behaviour:

Use this directive to force the angular.element library. This should be used to force either jqLite by leaving ng-jq blank or setting the name of the jquery variable under window (eg. jQuery).

According to the example,

This example shows how to force jqLite using the ngJq directive to the html tag.

<!doctype html>
<html ng-app ng-jq>
...
...
</html>

Upvotes: 2

Related Questions