Using blur.js with angularjs

Question

I'm trying to make a blurred background efect with angular on a div, something like the image above, for this i'm using blur.js and everything work fine with jquery but the real question is this posible with angularjs, and what is the best way?

I'm really newbie with angular

thanks in advance

here another example of using blurjs http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

SOLVED (with help of gtramontina):

you can download the code here demo-blurjs-angular

The result (with my images)

This demo contain a issue (that is really of blur.js) like Edd Turtle mention on his post

Important Note: This technique doesn’t work with local files and has to run through a server, likewise if the background is hosted on the Amazon S3 service you will need to enable cross-domain calls (CORS)..

Answer 1

You need to write a angularjs directive for blur.js. Here is an example of how to write a directive for a query plugin:

http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Answer 2

I suggest you create a directive, restricted to attribute maybe, and have that applying your effect.

Something like this (not tested - and assuming you've included, in this order, jquery, blur.js, then angular;

angular.module('myApp', []).
directive('blurred', function () {
  var directive = { restrict: 'A' };
  directive.compile = function compile (tElement) {
    // taken from blur.js homepage
    tElement.blurjs({
      source: 'body',
      radius: 7,
      overlay: 'rgba(255,255,255,0.4)'
    });
  };
  return directive;
});

Then use it:

<p blurred>lorem ipsum</p>

The point with the order I mentioned above, is that if you include jquery before angular, then angular uses it to wrap its dom elements, otherwise it'll use jqlite.