Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Zailey Walls
Zailey Walls
5,427 Points

How can I use jquery plugins with AngularJS?

Seems as though I can't get jquery plugins to work using AngularJS. Does anyone have a solution for this?

Ken Howard
Ken Howard
Treehouse Guest Teacher
Ken Howard
Ken Howard
Treehouse Guest Teacher

The problem with using jQuery plugins with Angular is that Angular is watching parts of the DOM (Document Object Model) that it's aware of.

If you were to have something like this jQuery snippet added to your page:

$('.item-list').append('<li>new item</li>');

Where .item-list is an unordered list with using the ng-repeat directive, the new item would be added to the DOM but Angular wouldn't know about it in any way.

To get Angular to respect the code produced by your jQuery plugin you'll need to wrap the execution of the plugin in an Angular directive.

Here's one example: https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/