angularjs: arka plan resmi için ng-src eşdeğeri: url (…)

Angularjs size sahip etiket ng-src angularjs arasına yerleştirilen değişkenleri değerlendirmek bulmadan Geçersiz bir url için bir hata almazsınız bu amaca sahiptir {{ve }}.

Sorun, background-imagebir url kümesi ile oldukça bazı DIV kullanmaktır . Bunu background-size, görüntüyü DIV'nin tam boyutuna kesen mükemmel CSS3 özelliği nedeniyle yapıyorum .

Tek sorun, bir ng-src etiketi oluşturdukları tam olarak aynı nedenden dolayı çok fazla hata almasıdır: Url'de bazı değişkenler var ve tarayıcı görüntünün var olmadığını düşünüyor.

Ham yazı yazma olasılığının olduğunun farkındayım {{"style='background-image:url(myVariableUrl)'"}}, ama bu 'kirli' görünüyor.

Çok araştırdım ve bunu yapmanın doğru yolunu bulamıyorum. Uygulamam, tüm bu hatalar nedeniyle bir karmaşa haline geliyor.

ngSrcyerel bir yönerge olduğundan, div'inizin background-imagestilini değiştiren benzer bir yönerge istediğiniz anlaşılıyor .

Tam olarak istediğinizi yapan kendi direktifinizi yazabilirsiniz. Örneğin

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

Hangisini böyle çağırırsın

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

Sevimli kedilerle bonus olarak JSFiddle: http://jsfiddle.net/jaimem/aSjwk/1/

Bu benim için çalışıyor

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

Yukarıdaki cevap gözlemlenebilir enterpolasyonu desteklemez (ve hata ayıklamaya çalışırken bana çok zaman harcadı). JsFiddle bağlantı @BrandonTilley yorumda ben yeniden yazı edeceğiz buraya korunması için benim için çalıştı cevap, oldu:

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

Denetleyici ve şablon kullanma örneği

Denetleyici:

$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];

Şablon:

Şablonda şu şekilde kullanın:

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

ya da böyle:

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

Aşağıdakilerle böyle bir şey yapmak da mümkündür ng-style:

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

mevcut olmayan bir görüntüyü getirmeye çalışmaz.

Hooblei'nin cevabına benzer şekilde, sadece enterpolasyonla:

<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>

sadece bir zevk meselesidir, ancak değişkene veya işleve doğrudan bu şekilde erişmeyi tercih ediyorsanız:

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

bunun gibi enterpolasyon yapmak yerine:

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

yönergeyi öznitelikte scope.$watchne yapacağından biraz farklı tanımlayabilirsiniz.$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'
            });
        });
    };
})

burada daha fazla arka plan var: AngularJS: $ observe ve $ watch yöntemleri arasındaki fark

@jaime cevabınız iyi. Ancak sayfanızda http.get varsa, ng-if

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

fabrikada

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

kontrolör alanında

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
        };
    });
});

ve eğer aşağıdaki gibi ng-if kullanırsanız, görüntüyü enterpolasyon ile alırsınız, aksi takdirde yönerge HTTP isteğinden önce değeri alır.

<div class="stat-banner"  ng-if="banner.image" background-image-directive="{{banner.image}}">

Eşzamansız durumumda en iyi şekilde çalışmak için DOM'dan stili soyutlayan 1.5 bileşenle buldum.

Misal:

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

Ve denetleyicide bir şey bunu seviyor:

this.$onChanges = onChanges;

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

function setBackgroundUrl(value){
    return 'url(' + value.imgUrl + ')';
}

Bahsettiğiniz ng-srcve sayfanızın resminizi yüklemeden önce oluşturmayı bitirmesini istediğiniz gibi göründüğünden , tarayıcı işlemeyi bitirdikten sonra yerel yönerge çalıştırmak için jaime'nin yanıtını değiştirebilirsiniz .

Bu blog yazısı bunu gayet iyi açıklıyor; esas olarak, eklemek $timeoutsarıcı için window.setTimeoutCSS için bu değişiklikler yapmak olup, burada geri arama işlevi önce.