将blur.js与angularjs一起使用

我试图用div上的角度模糊背景效果，就像上面的图像一样，因为我使用的是blur.js ，一切都可以正常使用jquery，但真正的问题是这个有棱角分明的问题，什么是最好的方法？

我真的很有角度的新手

提前致谢

这里使用blurjs的另一个例子http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

已解决 （在gtramontina的帮助下）：

你可以在这里下载demo-blurjs-angular代码

结果（用我的图片）

这个演示包含一个问题（实际上是blur.js），就像Edd Turtle在他的post中提到的那样

重要说明 ：此技术不适用于本地文件，必须通过服务器运行，同样，如果后台托管在Amazon S3服务上，则需要启用跨域调用（CORS）。

Answer 1

我建议你创建一个directive ，仅限于属性，然后应用你的效果。

像这样的东西（ 没有经过测试 – 假设你按照这个顺序包括了jquery ， blur.js ，然后是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; }); 

然后使用它：

 
lorem ipsum 

我在上面提到的顺序的一点是，如果你在angular之前包含jquery ，那么angular使用它来包装它的dom元素，否则它将使用jqlite 。

Answer 2

你需要为blur.js写一个angularjs指令。 以下是如何为查询插件编写指令的示例：

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