3 ms·

Since when do Angular and JQuery not play nicely? Angular uses "JQLite" which gets replaced with JQuery if it's already loaded. I guess if you're trying direc

Since when do Angular and JQuery not play nicely? Angular uses "JQLite" which gets replaced with JQuery if it's already loaded. I guess if you're trying direct dom manipulation on the same elements from outside of Angular with JQuery and with Angular it could get messy. The community would just say "you're not doing it the Angular way." You're not. You can use the JQuery inside a directive and controller and be fine. https://docs.angularjs.org/misc/faq https://docs.angularjs.org/misc/faq

striking 12y ago
Right, that's what I meant. Sorry about my phrasing.
ascotan 12y ago
jquery and angular do not play nicely not matter what the angular people say. Any non-trivial jquery plugin included into a angularjs page will require $timeout(0) hacks to get it to behave properly.
- brianbarker 12y ago
  But again, is your plugin being called from an angular module, or are you running them separately on the same nodes? That's typically the problem, and it makes sense. If any two frameworks are messing with the same page content, you're bound to see issues. Edit: see comment above as well about JQuery plugins.
Macha 12y ago
Ok, to give a specific example: We use drag and drop for sorting in a few places. Our initial implementation was to wrap jQuery UI Sortable in a directive. This worked to an extent, but for our purpose, we ended up having to read the DOM and update the Angular scope from the DOM after jqUI emitted its event. This logic ended up being somewhat clunky. We rewrote our directive in terms of HTML5 drag and drop such that when a user drops something, we get an event on the Angular scope, saying which element was dragged, and which element it was dropped on and then our controller rearranges the array in the scope, and only then is the DOM modified by Angular. This generally isn't possible with jqUI and its plugins, which modify the DOM first and tell you about it later (in such unhelpful low level terms as "moved 100px up" rather than "moved two elements forward").
- brianbarker 12y ago
  Yeah I can see how that would be a problem. Maybe it'd be better to clarify that JQuery and Angular work great together; however, JQuery plugins (which may have all kinds of selectors, state, DOM manipulation) cannot be guaranteed to do what you want inside of Angular.

striking 12y ago

Right, that's what I meant. Sorry about my phrasing.

ascotan 12y ago

jquery and angular do not play nicely not matter what the angular people say. Any non-trivial jquery plugin included into a angularjs page will require $timeout(0) hacks to get it to behave properly.

brianbarker 12y ago
But again, is your plugin being called from an angular module, or are you running them separately on the same nodes? That's typically the problem, and it makes sense. If any two frameworks are messing with the same page content, you're bound to see issues. Edit: see comment above as well about JQuery plugins.

Macha 12y ago

Ok, to give a specific example: We use drag and drop for sorting in a few places. Our initial implementation was to wrap jQuery UI Sortable in a directive. This worked to an extent, but for our purpose, we ended up having to read the DOM and update the Angular scope from the DOM after jqUI emitted its event. This logic ended up being somewhat clunky. We rewrote our directive in terms of HTML5 drag and drop such that when a user drops something, we get an event on the Angular scope, saying which element was dragged, and which element it was dropped on and then our controller rearranges the array in the scope, and only then is the DOM modified by Angular. This generally isn't possible with jqUI and its plugins, which modify the DOM first and tell you about it later (in such unhelpful low level terms as "moved 100px up" rather than "moved two elements forward").

brianbarker 12y ago
Yeah I can see how that would be a problem. Maybe it'd be better to clarify that JQuery and Angular work great together; however, JQuery plugins (which may have all kinds of selectors, state, DOM manipulation) cannot be guaranteed to do what you want inside of Angular.