AngularJSで 'ng-style'を使用して背景画像を追加する

Question

divを使用して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; 
} 

私もこれを複製しようとしていますフィドルhereのセットアップ。誰にもアイデアはありますか？

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をsuppoorts。

だから今あなたが使用することができますng-style="{ backgroundImage: variableInScope + '/some/string' }"