Using blur.js with angularjs

All we need is an easy explanation of the problem, so here it is.

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)

Result

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)..

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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.

Method 2

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/

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply