ng-class在渲染後不設置圖像背景

我正在尋找使用ng-style動態設置div的背景圖像。有幾個答案，但沒有爲我工作。我已經意識到，對於一個簡單的情況下，如下圖所示，沒有任何問題ng-class在渲染後不設置圖像背景

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

其中$scope.image = ...定義。或者更直白：

<li ng-style="{'background-image': 'url(http://example.com/image.png)'}">...</li>

但是假如你具備以下條件：

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

和控制器：模板被渲染後

$scope.item = undefined; 
Items.get({id: 1}) 
    .then(function (item) { 
     $scope.item = item; 
    });

項目變爲可用。而且我發現，角只是設置背景圖片到主機URL

<li ng-style="{'background-image': 'url({{ item.image_url }})'}" style="background-image: url(http://localhost:3000/);"> 
</li>

我可以使用自定義指令這一點，但如果有得到這個工作的一個簡單的方法，我寧願這在指示。

這裏有一個plunker演示該問題：

2015-11-07 T. Rex

NG風格已經綁定變量的作用域，所以你不需要添加大括號，但可以簡單地CONCAT正確的字符串值：

ng-style="{'background-image': 'url(' + item.image_url + ')' }"

2015-11-07 10:47:22 Numyx

<div ng-if="item.image_url" class="img-div" ng-style="{'background-image': 'url({{item.image_url}})' }"></div>

使用ng - 如果是這樣，當item.image_url獲得值後，您的元素被渲染。

2015-11-07 10:50:30

ng-style="{'background-image': 'url({{item.image_url}})' }"

2015-11-07 10:52:04

回答