将blur.js与angularjs一起使用

Question

我正在尝试使用div上的角度模糊背景效果，如上图所示，因为我正在使用blur.js并且所有内容都适用于jquery但是真正的问题是这个有效angularjs，最好的方法是什么？

我是角度

的新人

提前致谢

这里使用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; < / p>

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;
});

然后使用它：

<p blurred>lorem ipsum</p>

上面提到的顺序是，如果你在jquery之前加入angular，那么angular会用它来包装它的dom元素，否则它会使用{{1} }。

Answer 2

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

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