読者です 読者をやめる 読者になる 読者になる

ぽよメモ

ファッション情報学徒の備忘録.

AngularJSでパスにスペースを含むimgをbackground-imageに指定する

monaca javascript ぷよぐやみんぐ

例えば/hoge/fuga/contain space image.jpgみたいなjpegファイルを表示したいとき,ng-srcに値を渡せば問題ありません.
しかし,これをbackground-imageに指定したいとき,つまりAngularJSでCSSを使って画像を表示したいとき,ディレクティブを自作するのが一番良い,というのがいくつかstackoverflowのページを何個か見て得た答えです.

いくつかの例: stackoverflow.com stackoverflow.com

しかしこれは全てスペースを含んだパスではうまく動作しません.結果として値を渡された後,

background-image: url(/hoge/fuga/contain space image.jpg);

となり,スペース部分でエラーを吐くからです.

というわけで以下のようなディレクティブを作成しました.

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

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url("' + value +'")'
            });
        });
    };
});

普通に考えてみれば簡単な話だったのですが,要するにurl()にファイルパスを文字列として渡せれば良いわけで,このようにくくってやればいいわけです.
使い方は以下.

<ons-template id="sample.html">
<ons-page ng-controller="SampleController">
  <ons-toolbar>
    <div class="center">{{ data.title }}</div>
  </ons-toolbar>
    <div back-img="{{data.path}}"></div>
</ons-page>
</ons-template>
app.controller("SampleController", ["$scope", function($scope){
  $scope.data = {
    title: "SampleImage",
    path: "/path/to/contain space image.jpg"
  }
}]);

これで半日潰したあの日が懐かしいです.