Question

我正在寻找使用ng-style动态设置div的背景图像。有几个答案，但没有一个适合我。我已经意识到，对于如下所示的简单案例，没有问题

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

项目在呈现模板后变为可用。我发现angular只是将背景图像设置为主机URL

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

我可以使用自定义指令，但是如果有一种简单的方法可以使它工作，我更喜欢这个指令。

这是一个证明这个问题的傻瓜：

Answer 1

ng-style已绑定范围变量，因此您不需要添加花括号，但可以简单地连接正确的字符串值：

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

Answer 2

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

Answer 3

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

使用ng-if如果是这样，当item.image_url获得值后，您的元素将被渲染。