152

anglejsには、angularjsがとの間に配置された変数を評価する前に無効なURLのエラーを受け取らないことを目的としたタグng-src{{があり}}ます。

background-image問題は、URLに設定されたかなりの数のDIVを使用していることです。background-sizeこれは、画像をDIVの正確なサイズにトリミングする優れたCSS3プロパティのためです。

唯一の問題は、ng-srcタグを作成したのとまったく同じ理由で多くのエラーが発生することです。URLにいくつかの変数があり、ブラウザは画像が存在しないと判断します。

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

私はたくさん検索しましたが、これを行う正しい方法を見つけることができません。これらすべてのエラーのために、私のアプリは混乱しつつあります。

4

9 に答える 9

232

これは私のために働く

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>
于 2013-05-13T01:37:51.877 に答える
201

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/

于 2012-12-08T21:51:12.540 に答える
69

上記の答えは、観察可能な補間をサポートしていません（そして、デバッグしようとすると多くの時間がかかります）。@BrandonTilleyコメントのjsFiddleリンクは、私にとって有効な答えでした。保存のために、ここに再投稿します。

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

コントローラとテンプレートを使用した例

コントローラー：

$scope.someID = ...;
/* 
The advantage of using directive will also work inside an ng-repeat :
someID can be inside an array of ID's 
*/

$scope.arrayOfIDs = [0,1,2,3];

レンプレート ：

このようにテンプレートで使用します：

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

またはそう：

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>
于 2013-03-21T00:29:33.930 に答える
40

でこのようなことをすることも可能ですng-style：

ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"

存在しない画像をフェッチしようとはしません。

于 2013-06-03T16:52:37.373 に答える
25

hoobleiの答えに似ていますが、補間するだけです。

<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>
于 2014-08-20T20:57:11.253 に答える
9

好みの問題ですが、変数または関数に直接アクセスする場合は、次のようにします。

<div id="playlist-icon" back-img="playlist.icon">

このように補間する代わりに：

<div id="playlist-icon" back-img="{{playlist.icon}}">

次に、属性に対してscope.$watch行うディレクティブを少し異なる方法で定義できます。$parse

angular.module('myApp', [])
.directive('bgImage', function(){

    return function(scope, element, attrs) {
        scope.$watch(attrs.bgImage, function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
})

これにはさらに多くの背景があります：AngularJS：$observeメソッドと$watchメソッドの違い

于 2014-12-22T13:12:58.247 に答える
2

@jaimeあなたの答えは大丈夫です。ただし、ページに$ http.getがある場合は、ng-ifを使用します。

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

工場で

app.factory('dataFactory', function($http){
    var factory = {};
    factory.getAboutData = function(){
        return $http.get("api/about-data.json");
    };
    return factory;
});

コントローラエリアで

app.controller('aboutCtrl', function($scope, $http, dataFactory){
    $scope.aboutData = [];
    dataFactory.getAboutData().then(function(response){
        // get full home data
        $scope.aboutData = response.data;
        // banner data
        $scope.banner = {
            "image": $scope.aboutData.bannerImage,
            "text": $scope.aboutData.bannerText
        };
    });
});

ngを使用する場合のビュー-以下のように、補間によって画像を取得します。それ以外の場合、ディレクティブはHTTPリクエストの前に値を取得するため、画像を取得できません。

<div class="stat-banner"  ng-if="banner.image" background-image-directive="{{banner.image}}">
于 2017-03-13T04:59:20.587 に答える
1

1.5のコンポーネントを使用して、DOMからスタイリングを抽象化し、非同期の状況で最適に機能することを発見しました。

例：

<div ng-style="{ 'background': $ctrl.backgroundUrl }"></div>

そして、コントローラーでは、次のようなものがあります。

this.$onChanges = onChanges;

function onChanges(changes) {
    if (changes.value.currentValue){
        $ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue);
    }
}

function setBackgroundUrl(value){
    return 'url(' + value.imgUrl + ')';
}
于 2017-02-23T14:07:09.423 に答える
0

あなたが言及ng-srcし、画像をロードする前にページのレンダリングを終了させたいように思われるので、ブラウザがレンダリングを終了した後にネイティブディレクティブを実行するようにjaimeの回答を変更できます。

このブログ投稿はこれをかなりよく説明しています。基本的に、CSSにこれらの変更を加えるコールバック関数の前に$timeoutラッパーを挿入します。window.setTimeout

于 2015-01-15T04:49:04.807 に答える