So you’ve chosen AngularJS as your framework of choice for you next big web project. Good for you! But during the course of development you realize you need to utilize some external libraries. Maybe you need a slider component, and decide to go with the one included with jQuery UI.
Using jQuery plugins - not just the ones included in jQuery UI - is easy on a normal web page. Throwing Angular into the mix makes it a little more complicated. Here are some tips for using jQuery plugins inside of AngularJS apps.
Check out this CodePen for interactive examples of the code below!
Plain-ol’ jQuery Plugin
On their own, jQuery plugins are easy to use: just initialize the plugin in an IIFE or a document.ready event.
jQuery Plugin in an Angular App
Trying to use a jQuery plugin in an Angular app is trickier. Unfortunately you can’t just move the initialization into your controller. Not only is it bad practice, but Angular won’t be aware of any changes to or interactions with the plugin. This means that data binding with the plugin will be broken.
Since you probably chose Angular because of its strong templating and data binding capabilities, this doesn’t look good.
The Fix: Use $scope.$apply()
You can restore Angular’s data binding using $scope.$apply(). This method hooks into Angular’s digest cycle, making your app aware of the changes made by the jQuery plugin to any $scope properties.
Creating a Direcitve
To make the jQuery plugin code more reusable, you can create a directive for the plugin. Any plugin initialization code should go in the directive’s link method. Include the directive in your HTML and you should be good to go.
Adding Two-way Data Binding
The above example only gives you one-way data binding, from the plugin to the model. What if you want to update the plugin when the model changes from another input? Using $scope.$watch(), you can have Angular watch for changes to a value and have your directive update to reflect those changes.
Below is one final example of a jQuery slider directive. In addition to the techniques seen above, it also reads HTML attributes to configure the slider (available in the link method’s attrs property).
Check out this CodePen for interactive examples of the code above!