2014-06-15 12 views
5

Sto cercando di rendere un effetto di sfondo sfocato con angolare su un div, qualcosa come l'immagine sopra, per questo sto usando blur.js e tutto funziona bene con jquery ma la vera domanda è questa posible with angularjs, e qual è il modo migliore?Uso di blur.js con angularjs

Sono davvero newbie con angolari

grazie in anticipo

qui un altro esempio di utilizzo blurjs http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

RISOLTO (con l'aiuto di gtramontina):

è possibile scaricare il codice qui demo-blurjs-angular

Il risultato (con le mie immagini)

Result

Questa demo contiene un numero (che in realtà è di blur.js) come Edd Turtle menzione sul suo post

Nota importante: Questa tecnica doesn' t lavorare con i file locali e deve passare attraverso un server, allo stesso modo se lo sfondo è ospitato sul servizio Amazon S3 sarà necessario abilitare le chiamate tra domini (CORS) ..

risposta

2

Vi suggerisco di creare un directive, limitato a attribuire forse, e che hanno l'applicazione l'effetto.

qualcosa di simile (non testati - e supponendo che hai incluso, in questo ordine, jquery, blur.js, quindi 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; 
}); 

quindi utilizzarlo:

<p blurred>lorem ipsum</p> 

Il punto con l'ordine che ho menzionato sopra, è che se si includeprima del angular, allora angolare lo usa per racchiudere i suoi elementi dom, altrimenti sarà utilizzare .

+0

Grazie, questo funziona benissimo per me. Vado a postare il codice sovled. – Brujodedor