特定の画像をページの背景にするangularjsのdirective

page-backgroundで指定した画像をページの背景にできる。CSSだけでも実現できるが、AngularJSを使ってみた。

JavaScript

var app = angular.module('app', []);

app.directive('pageBackground', function() {
    return function (scope, elm, attr) {
        var url = attr.pageBackground;
        elm.css({
            'background': 'url(' + url + ') no-repeat center center fixed',
            '-webkit-background-size': 'cover',
            '-moz-background-size': 'cover',
            '-o-background-size': 'cover',
            'background-size': 'cover'
        });
    };
});

HTML

<!doctype html>
<html lang="ja" ng-app="app" page-background="hoge.jpg">
<head>
    <meta charset="UTF-8">
    <title>background-image</title>
    <script src="../angular.js"></script>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

controllerのscopeから値を取得できるようにしてgithubに上げました