AngularJS: jQuery $ in AngularJS Directive

Some of us still depend very much on jQuery when writing AngularJS directives. We will sometimes need to to use the jQuery $ function.

I was writing a directive to do page loading using jQuery blockUI plugin for an application i recently developed for a logistics company.

The documentation on jQuery blockUI plugin stated to use $ function to call the blockUI function like this:

$.blockUI();

When you try the above inside an AngularJS directive link function, you will inevitably get function undefined error:

link: function(){
$.blockUI() //undefined function error
}

When you also try to use jQuery inside the link function, you will also get an error similar to the one above.

link: function(){
jQuery.blockUI() //undefined function error
}

The solution to this problem is ‘angular.element’. AngularJS documentation states that angular.element is an alias for jQuery function. Bingo!

link: function(){
angular.element.blockUI() //correct way to do it
}

I am currently using AngularJS for some of my projects. If you find the tutorial helpful, you can follow me below for more