Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

ngJq is not picking the jQuery version #11647

Closed
cexbrayat opened this issue Apr 19, 2015 · 6 comments
Closed

ngJq is not picking the jQuery version #11647

cexbrayat opened this issue Apr 19, 2015 · 6 comments

Comments

@cexbrayat
Copy link
Member

I was trying to set up a simple example for ngJq and it is not picking the jQuery version that I aliased to

var jQuery_2_1_3 = $.noConflict(true);

Maybe that's not how it is supposed to work, but when debugging the source code in rc0, it appears that the ng-jq attribute is never picked up by the querySelector in https://github.com/angular/angular.js/blob/master/src/Angular.js#L998

I may be missing something obvious, but I can't see what...

I reproduced in this plunkr
@cexbrayat
Copy link
Member Author

@mboudreau maybe you'll have an idea ?

@mboudreau
Copy link
Contributor

@cexbrayat Yes, I do.

Essentially, it comes down to event flow based on the initialization. In this case, Angular is being loaded and initialized in the head. ng-jq gets called as soon as angular initializes since Angular needs angular.element to be available from the get-go.

When debugging the code, when it hits the jq() function within Angular, I printed out the 'document' that's current returned and I got this:

<html>
<head>
    <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script>
      var jQuery_2_1_3 = $.noConflict(true);
    </script>
    <script data-require="[email protected]" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script><style type="text/css"></style>
</head>
</html>

As you'll notice, there's no body in there. I'm not sure why this is happening since I would imagine that the body would be present in the html itself. It seems like javascript doesn't have access to it just yet...

Either way, if you want to fix this issue, you can either remove the angular.js library from within the head and place it within the body underneath your bit of templating code, or you can simply move the ng-app, ng-jq and ng-controller attributes to be part of the html tag instead of the body. This way, when angular searches for the ng-jq tag, it will be present no matter what.

Cheers.

@gkalpak
Copy link
Member

gkalpak commented Apr 20, 2015

Since the DOM is being built while parsing the HTML from top to bottom,it is epected that while executing a script in the head, the body element has not been created yet (since the corresponding HTML part has not been parsed yet).

In addition to @mboudreau's suggestion (and taking into account that ng-jq is (unfortunately) "global" (i.e. shared among all Angular apps on the page)), you only need to move the ng-jq attribute on an element that has already been created when the Angular script is executed. You don't have to also move ng-app if you can't/don't want to.

That said, it is always a good idea to put scripts at the end of body, to avoid showing an empty page while the scripts are loading.

@cexbrayat
Copy link
Member Author

Thank you both for your answers. I was not really worried about my own case (that was just a simple plunkr for an upcoming blog post on the 1.4 release), as I was that there might be a real problem. Your explanations make perfect sense, but it's slightly surprising, I think other people are gonna be bite by this...

I'll close the issue, but maybe this kind of thing should be documented, or even better, ngJq should not depend of its position to behave properly ?

@mboudreau
Copy link
Contributor

Well, to be fair, this is not the position of ngJq that matters, but if
JavaScript can parse the dom at the time that includes it.

On Mon, Apr 20, 2015, 6:03 PM Cédric Exbrayat [email protected]
wrote:

Thank you both for your answers. I was not really worried about my own
case (that was just a simple plunkr for an upcoming blog post on the 1.4
release), as I was that there might be a real problem. Your explanations
make perfect sense, but it's slightly surprising, I think other people are
gonna be bite by this...

I'll close the issue, but maybe this kind of thing should be documented,
or even better, ngJq should not depend of its position to behave properly
?

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

@gkalpak
Copy link
Member

gkalpak commented Apr 20, 2015

@mboudreau, not really. JavaScript can parse the DOM, but only the part of the DOM that has already been created by the time it is executed. The DOM is constructed incrementally as the HTML is being parsed by the browser, so it is indeed a matter of position.

Ideally, ngJq should be associated with an Angular app (so that different apps on a page can reference different versions of jQuery), but I am not sure this possible without a big refactoring of the inner workings of Angular (and it's dependence on jqLite/jQuery).
So, I don't think it is something worth doing.

Maybe a short mention in the docs would be in place.

@TheBelgarion TheBelgarion mentioned this issue May 1, 2015
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@cexbrayat @mboudreau @gkalpak