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

例えば/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"
  }
}]);

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