An approach to use jQuery Plugins with AngularJS

Lets face it, we can not completely get rid of jQuery and its plugins ecosystem, even though Angular has a built-in subset of jQuery under the name jQLite. At one point or another, we often need some sort of jQuery plugins in our application and we can/should not port entire plugin into Angular world in order to use it but we can avoid the plugin initialization code to be scattered across.


Simply by writing a directive for it.

I would like to give you a small demo of Toolbar.js which is a jquery plugin I found recently on This is how we create a tooltip style toolbar in jQuery:

<!-- Click this to see a toolbar -->
<div id="format-toolbar" class="settings-button">
    <img src="">

<!-- Our tooltip style toolbar -->
<div id="format-toolbar-options">
	<a href="#"><i class="icon-align-left"></i></a>
	<a href="#"><i class="icon-align-center"></i></a>
	<a href="#"><i class="icon-align-right"></i></a>
<!-- Typical jQuery plugin invocation -->
	content: '#format-toolbar-options', 
	position: 'left'

Enter the dragon a.k.a Angular

We’ll keep our markup intact by just adding a custom attribute named `toolbar-tip` – which will be an angular directive we’ll going to write soon. So our markup will change to:

<div id="format-toolbar1" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
	<img src="">

One thing to notice here is that I’ve moved all the options of a toolbar into an HTML so that we can use the same directiv anywhere else with different options/settings.


var App = angular.module('Toolbar', []);

App.directive('toolbarTip', function() {
	return {
		// Restrict it to be an attribute in this case
		restrict: 'A',
		// responsible for registering DOM listeners as well as updating the DOM
		link: function(scope, element, attrs) {

Woohoo! Is not that awesome?? Everything is simple, maintainable and testable!!!


If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.