angularjs - 在AngularJS中添加带有'ng-style'的背景图片

Question

我似乎无法使用控制器来设置 div 的 CSS 背景属性。到目前为止，这是我的代码，根据文档：

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

我还尝试在此处的小提琴中复制此设置。有没有人有任何想法？

Answer 1

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

background-image需要url()工作。

Answer 2

您需要url()对背景图像使用 css 功能，如下所示：

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

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

Answer 3

AngularJS 现在支持ng-style.

所以现在你可以使用ng-style="{ backgroundImage: variableInScope + '/some/string' }"