2013-08-28 13 views
6

Nie mogę użyć kontrolera do ustawienia właściwości tła CSS elementu div. Oto mój kod do tej pory, zgodnie z dokumentacją:Dodawanie obrazu tła z "ng-style" w AngularJS

HTML:

<div class="hero" ng-controller="HeroCtrl" ng-style="heroImage"></div> 

JS:

'use strict'; 

angular.module('AppliedSiteApp').controller('HeroCtrl', function ($scope) { 

    $scope.heroImage = { 
     background: 'images/brick.jpg' 
    }; 

    console.log($scope.heroImage); 

}); 

CSS:

.hero { 
    width: 100%; 
    min-height: 350px; 
    background-position: center center; 
} 

Próbowałem również powtórzyć ten konfiguracja w Fiddle here. Czy ktoś ma jakieś pomysły?

Odpowiedz

8
$scope.heroImage = { 
    background: 'url(images/brick.jpg)' 
}; 

background-image wymaga url() do pracy.

+0

Absolutnie szkolnym chłopca. Dzięki! – JohnRobertPett

3

Trzeba użyć css' url() funkcję obrazów tła, tak:

'background-image': 'url(http://i.stack.imgur.com/mfvI9.jpg)' 

Plunker: http://plnkr.co/edit/PFUY0w?p=preview

+1

Aby użyć z danymi dynamicznymi, należy wykonać polecenie ng-style = "{'background-image': 'url (' + data.url + ')'}"> – Eric

4

angularjs suppoorts teraz ng-style.

Więc teraz można używać ng-style="{ backgroundImage: variableInScope + '/some/string' }"