angularjs: odpowiednik ng-src dla background-image: url (…)

W angularjs masz tag ng-src, którego celem jest to, że nie otrzymasz błędu dla nieprawidłowego adresu URL, zanim angularjs będzie mógł ocenić zmienne umieszczone między {{a }}.

Problem polega na tym, że używam całkiem sporo DIV z background-imageustawionym adresem URL. Robię to ze względu na doskonałą właściwość CSS3, background-sizektóra przycina obraz do dokładnego rozmiaru DIV.

Jedynym problemem jest to, że otrzymuję wiele błędów z tego samego powodu, dla którego utworzyli tag ng-src: mam kilka zmiennych w adresie URL, a przeglądarka uważa, że ​​obraz nie istnieje.

Zdaję sobie sprawę, że jest możliwość napisania prymitywnego {{"style='background-image:url(myVariableUrl)'"}}, ale to wydaje się „brudne”.

Szukałem dużo i nie mogę znaleźć właściwego sposobu, aby to zrobić. Z powodu tych wszystkich błędów moja aplikacja staje się bałaganem.

ngSrcjest dyrektywą natywną, więc wygląda na to, że potrzebujesz podobnej dyrektywy, która modyfikuje background-imagestyl Twojego elementu div .

Możesz napisać własną dyrektywę, która robi dokładnie to, co chcesz. Na przykład

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

Które byś wywołał w ten sposób

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

JSFiddle z uroczymi kotami jako bonus: http://jsfiddle.net/jaimem/aSjwk/1/

Ten działa dla mnie

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

Powyższa odpowiedź nie obsługuje obserwowalnej interpolacji (i kosztowała mnie dużo czasu podczas debugowania). Link jsFiddle w @BrandonTilley komentarzu była odpowiedź, że pracował dla mnie, co będę ponownie post tutaj dla zachowania:

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

Przykład użycia kontrolera i szablonu

Kontroler :

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

Szablon:

Użyj w szablonie w następujący sposób:

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

lub tak:

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

Można również zrobić coś takiego za pomocą ng-style:

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

który nie próbowałby pobrać nieistniejącego obrazu.

Podobnie jak odpowiedź Hooblei, tylko z interpolacją:

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

tylko kwestia gustu, ale jeśli wolisz mieć bezpośredni dostęp do zmiennej lub funkcji:

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

zamiast interpolować w ten sposób:

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

wtedy możesz zdefiniować dyrektywę nieco inaczej, z scope.$watchktórą zrobi to $parsena atrybucie

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

więcej informacji na ten temat można znaleźć tutaj: AngularJS: Różnica między metodami $ observ i $ watch

@jaime, twoja odpowiedź jest w porządku. Ale jeśli twoja strona ma $ http.get, użyj ng-if

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

w fabryce

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

w obszarze kontrolera

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

a widok, jeśli użyjesz ng-if jak poniżej, otrzymasz obraz przez interpolację, w przeciwnym razie nie możesz uzyskać obrazu, ponieważ dyrektywa pobiera wartość przed żądaniem HTTP.

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

Zauważyłem, że z 1.5 komponentami wyodrębnianie stylu z DOM działa najlepiej w mojej sytuacji asynchronicznej.

Przykład:

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

A w kontrolerze coś takiego:

this.$onChanges = onChanges;

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

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

Ponieważ wspomniałeś ng-srci wygląda na to, że chcesz, aby strona zakończyła renderowanie przed załadowaniem obrazu, możesz zmodyfikować odpowiedź jaime, aby uruchomić natywną dyrektywę po zakończeniu renderowania przez przeglądarkę.

Ten post na blogu dość dobrze to wyjaśnia; Zasadniczo, można włożyć $timeoutopakowanie do window.setTimeoutwcześniej funkcji połączenia zwrotnego, w którym można wprowadzać te modyfikacje CSS.