[解決済み] angularjs: background-image:url(...) に相当するng-src。

質問

angularjsでは タグ ng-src の間に置かれた変数を評価する前に、無効な url のためのエラーを受け取らないようにする目的があります。 {{ と }} .

問題は、かなりの数のDIVに background-image を url に設定します。これは、優れたCSS3プロパティである background-size これは、画像をDIVのサイズにぴったり合わせて切り取るものです。

唯一の問題は、ng-srcタグを作成したのと全く同じ理由で、多くのエラーを受け取ることです。urlに変数があり、ブラウザは画像が存在しないと思ってしまうのです。

を粗雑に書く可能性があることは承知しています。 {{"style='background-image:url(myVariableUrl)'"}} しかし、これは「汚い」ように思えます。

いろいろ検索してみたのですが、正しい方法が見つかりません。このエラーのせいで、私のアプリはめちゃくちゃになりつつあります。

解決方法を教えてください。

ngSrc はネイティブディレクティブなので、div の background-image のスタイルになります。

あなたが望むことを正確に行う独自のディレクティブを書くことができます。例えば

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

これは次のように実行されます。

<div back-img="<some-image-url>" ></div>

JSFiddleにかわいい猫のおまけ付き。 http://jsfiddle.net/jaimem/aSjwk/1/