2014-06-15 9 views
5

Próbuję zrobić niewyraźny efekt tła z kątowym na div, coś jak powyższy obrazek, do tego używam blur.js i wszystko działa dobrze z jquery ale prawdziwe pytanie jest to posible z angularjs i jaki jest najlepszy sposób?Użycie blur.js z angularjs

Jestem naprawdę newbie z kanciastych

dzięki z góry

tu kolejny przykład wykorzystania blurjs http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

SOLVED (z pomocą gtramontina):

można pobrać kod tutaj: demo-blurjs-angular

Wynik (z moich obrazów)

Result

To demo zawierać problem (to jest naprawdę blur.js) jak Edd Turtle wzmianki na jego post

Ważna uwaga: Ta technika robi” t działa z lokalnymi plikami i musi działać przez serwer, tak samo, jeśli tło jest hostowane w usłudze Amazon S3, musisz włączyć wywołania między domenami (CORS).

Odpowiedz

2

Proponuję utworzyć directive ograniczone do atrybutu może, i że stosując swój efekt.

Coś takiego (nie testowano - zakładając, że zostały dołączone, w tej kolejności, jquery, blur.js, następnie 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; 
}); 

Następnie użyj go:

<p blurred>lorem ipsum</p> 

punkt z zamówieniem, o którym wspomniałem powyżej, jest taki, że jeśli podłączysz jquery przed angular, to kątowy użyje go do zawijania jego elementów dom, w przeciwnym razie będzie użyj jqlite.

+0

Dzięki, działa to dla mnie doskonale. Idę opublikować kod sovled. – Brujodedor