使用blur.js与angularjs [英] Using blur.js with angularjs

问题描述

我试图与棱角模糊的背景效应的一个div，像上图中，为了这个，我正在使用的 blur.js 的，一切工作正常使用jQuery但真正的问题是，这可配合angularjs，什么是最好的方式？

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?

我真的新手具有角

在此先感谢

在这里使用blurjs的另一个例子 HTTP：//www.designedbyaturtle .co.uk / 2013 /模糊的一个背景图像/

here another example of using blurjs http://www.designedbyaturtle.co.uk/2013/blur-a-background-image/

解决（与 gtramontina 帮助）：

您可以在这里下载code 演示blurjs角

you can download the code here demo-blurjs-angular

结果（用我的图片）

这演示包含的问题（即blur.js真的）如埃德龟提他的帖子

This demo contain a issue (that is really of blur.js) like Edd Turtle mention on his post

重要提示：这种技术并不与本地文件工作，并通过服务器来运行，同样，如果后台亚马逊S3服务，您将需要启用跨域调用托管（CORS）。

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

推荐答案

我建议你创建一个指令，只限于也许属性，并让该应用的效果。

I suggest you create a directive, restricted to attribute maybe, and have that applying your effect.

像这样的东西（未测试 - 并假设你已经包括，按照这个顺序，的jQuery ，模糊.js文件，那么角;

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

然后使用它：

<p blurred>lorem ipsum</p>

与我上面提到的顺序来看，是说如果包括的jQuery 在角，那么棱角分明的用途它来包装它的DOM元素，否则它会使用 jqlite 。

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.

这篇关于使用blur.js与angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！