css - div - angularjs: ng-src equivalente para background-image: url(...)

dynamic background image angular

Question

En angularjs tiene la etiqueta ng-src que tiene el propósito de que no recibirá un error para una url no válida antes de que angularjs llegue a evaluar las variables ubicadas entre {{ y }} .

El problema es que uso bastante DIV con una background-image configurada en una url. Lo hago por el excelente background-size propiedad CSS3 que recorta la imagen al tamaño exacto de DIV.

El único problema es que recibo muchos errores por la misma razón que crearon una etiqueta ng-src: tengo algunas variables en la url y el navegador cree que la imagen no existe.

Me doy cuenta de que existe la posibilidad de escribir un crudo {{"style=''background-image:url(myVariableUrl)''"}} , pero parece "sucio".

He buscado mucho y no puedo encontrar la forma correcta de hacerlo. Mi aplicación se está convirtiendo en un desastre debido a todos estos errores.

Answer 1

@jaime tu respuesta está bien. Pero si tu página tiene $ http.get, entonces tienes que usar ng-if

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

en la fábrica

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

en el área del controlador

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

y la vista si usa ng-if como a continuación, obtendrá la imagen por interpolación, de lo contrario, no puede obtener la imagen porque la directiva obtiene el valor antes de la solicitud HTTP.

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

Answer 2

Como mencionó ng-src y parece que desea que la página termine de renderizarse antes de cargar su imagen, puede modificar la respuesta de jaime para ejecutar la directiva nativa después de que el navegador finalice la representación.

Esta publicación en el blog explica esto bastante bien; esencialmente, inserta el contenedor $timeout para window.setTimeout antes de la función de devolución de llamada en la que realiza esas modificaciones en el CSS.

Answer 3

Esta funciona para mí

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

Answer 4

He encontrado con 1.5 componentes que resumen el estilo del DOM para que funcione mejor en mi situación asincrónica.

Ejemplo:

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

Y en el controlador, algo le gusta esto:

this.$onChanges = onChanges;

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

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

Answer 5

La respuesta anterior no admite la interpolación observable (y me costó mucho tiempo intentar depurar). El jsfiddle.net/BinaryMuse/aSjwk/2 en el comentario de @BrandonTilley fue la respuesta que funcionó para mí, la cual volveré a publicar aquí para preservación:

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

Ejemplo usando el controlador y la plantilla

Controlador :

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

Modelo :

Úselo en plantilla así:

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

o algo así:

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

Answer 6

Similar a la respuesta de hooblei, solo con interpolación:

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

Answer 7

También es posible hacer algo como esto con ng-style :

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

que no intentaría buscar una imagen no existente.

Answer 8

solo una cuestión de gusto, pero si prefiere acceder a la variable o función directamente de esta manera:

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

en lugar de interpolar así:

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

entonces puedes definir la directiva un poco diferente con scope.$watch que hará $parse en el atributo

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

aquí hay más antecedentes sobre esto: AngularJS: Diferencia entre los métodos $ observe y $ watch

Answer 9

ngSrc es una directiva nativa, por lo que parece que quieres una directiva similar que modifique el estilo de background-image de background-image tu div.

Podría escribir su propia directiva que haga exactamente lo que quiere. Por ejemplo

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

Que invocarías así

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

JSFiddle con gatos lindos como una bonificación: http://jsfiddle.net/jaimem/aSjwk/1/