Thanks to visit codestin.com
Credit goes to github.com

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

refactor(jQlite): Add the ability to use query selector without jQuery #15986

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor(jQlite): Add the ability to use query selector without jQuery #15986

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
930ee2d
refactor(jQlite): add the ability to use query selector without jQuery
orafaelfragoso May 14, 2017
ecb0569
refactor(jQuery): call window before using document
Oct 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
refactor(jQlite): add the ability to use query selector without jQuery 
`angular.element` threw an error if we tried to use query selector
directly without jQuery. I thought that this was a silly little
fix for the framework.

A lot of the projects that I've worked for
the past years are only including jQuery to use query selectors on
the app (I know that are options for this), and I'm only making this PR
because I think it's unnecessary to use
`angular.element(document).find()` to accomplish such a small thing and
to get the jQlite wrapper with the goodies.

Now we can do this, without jQuery:

`angular.element('.something')`

And get the same result.
  • Loading branch information
@orafaelfragoso
orafaelfragoso authored and Rafael Fragoso committed Oct 11, 2017
commit 930ee2df7d1bd0c0d24822da84f1ac89ec920f7e
8 changes: 4 additions & 4 deletions src/jqLite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
* <div class="alert alert-info">**Note:** All element references in AngularJS are always wrapped with jQuery or
* jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.</div>
*
* <div class="alert alert-warning">**Note:** Keep in mind that this function will not find elements
* by tag name / CSS selector. For lookups by tag name, try instead `angular.element(document).find(...)`
* or `$document.find()`, or use the standard DOM APIs, e.g. `document.querySelectorAll()`.</div>
* <div class="alert alert-info">**Note:** This function will find elements
* by tag name / CSS selector and wrap it in a jQlite object, or in a jQuery object if it's available. You can also query the DOM like `angular.element(document).find(...)`
* or `$document.find()`, or use the standard DOM APIs, e.g. `document.querySelectorAll()`, without the wrapper.</div>
*
* ## AngularJS's jqLite
* jqLite provides only the following jQuery methods:
Expand Down Expand Up @@ -284,7 +284,7 @@ function JQLite(element) {
}
if (!(this instanceof JQLite)) {
if (argIsString && element.charAt(0) !== '<') {
throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
return new JQLite(document.querySelector(element));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to use window.document. We don't assume browser globals are available globally, they have to be taken from window. You can also see that the Travis build failed because of that.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for letting me know.
I've been busy this entire time but I'll take the time to finish the PR.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the window call to it and rebased everything.

}
return new JQLite(element);
}
Expand Down