anglejs: ng-src äquivalent für Hintergrundbild: url (…)

In anglejs haben Sie das Tag ng-src, das den Zweck hat, dass Sie keinen Fehler für eine ungültige URL erhalten, bevor angularjs die zwischen {{und platzierten Variablen auswerten kann }}.

Das Problem ist, dass ich einige DIVs mit einem background-imageSatz auf eine URL verwende. Ich mache das wegen der hervorragenden CSS3-Eigenschaft, background-sizedie das Bild auf die exakte Größe des DIV zuschneidet.

Das einzige Problem ist, dass ich viele Fehler erhalte, genau aus dem gleichen Grund, aus dem sie ein ng-src-Tag erstellt haben: Ich habe einige Variablen in der URL und der Browser glaubt, dass das Bild nicht existiert.

Mir ist klar, dass es eine Möglichkeit gibt, ein Rohöl zu schreiben {{"style='background-image:url(myVariableUrl)'"}}, aber das scheint "schmutzig" zu sein.

Ich habe viel gesucht und kann nicht den richtigen Weg finden, dies zu tun. Meine App wird aufgrund all dieser Fehler zu einem Chaos.

ngSrcist eine native Direktive, daher möchten Sie anscheinend eine ähnliche Direktive, die den background-imageStil Ihres Divs ändert .

Sie könnten Ihre eigene Direktive schreiben, die genau das tut, was Sie wollen. Beispielsweise

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

Was Sie so aufrufen würden

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

JSFiddle mit süßen Katzen als Bonus: http://jsfiddle.net/jaimem/aSjwk/1/

Dieser arbeitet für mich

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

Die obige Antwort unterstützt keine beobachtbare Interpolation (und kostet mich viel Zeit beim Debuggen). Der jsFiddle-Link im Kommentar von @BrandonTilley war die Antwort, die für mich funktioniert hat. Ich werde sie hier zur Aufbewahrung erneut veröffentlichen:

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

Beispiel mit Controller und Vorlage

Controller:

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

Vorlage :

Verwenden Sie in Vorlage wie folgt:

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

oder so:

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

Es ist auch möglich, so etwas zu tun mit ng-style:

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

die nicht versuchen würde, ein nicht vorhandenes Bild abzurufen.

Ähnlich wie bei Hooblei, nur mit Interpolation:

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

Nur eine Frage des Geschmacks, aber wenn Sie lieber direkt auf die Variable oder Funktion zugreifen möchten:

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

anstatt so zu interpolieren:

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

Dann können Sie die Direktive etwas anders definieren, scope.$watchwas $parsefür das Attribut gilt

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

Hier gibt es mehr Hintergrundinformationen: AngularJS: Unterschied zwischen den Methoden $ watch und $ watch

@jaime deine Antwort ist in Ordnung. Wenn Ihre Seite jedoch $ http.get enthält, müssen Sie ng-if verwenden

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

in der Fabrik

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

im Controller-Bereich

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

und die Ansicht, wenn Sie das ng-if wie unten verwenden, erhalten Sie das Bild durch Interpolation. Andernfalls können Sie das Bild nicht erhalten, da die Direktive den Wert vor der HTTP-Anforderung erhält.

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

Ich habe mit 1,5 Komponenten festgestellt, dass das Abstrahieren des Stils vom DOM in meiner asynchronen Situation am besten funktioniert.

Beispiel:

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

Und in der Steuerung sieht so etwas aus:

this.$onChanges = onChanges;

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

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

Da Sie dies erwähnt haben ng-srcund es so aussieht, als ob Sie möchten, dass die Seite vor dem Laden Ihres Bildes vollständig gerendert wird, können Sie die Antwort von jaime so ändern, dass die native Direktive ausgeführt wird, nachdem der Browser das Rendern beendet hat.

Dieser Blog-Beitrag erklärt dies ziemlich gut; Im Wesentlichen fügen Sie den $timeoutWrapper für window.setTimeoutvor der Rückruffunktion ein, in der Sie diese Änderungen am CSS vornehmen.