我可以使用 $scope 变量作为 div 背景图像吗

Question

我正在尝试通过 AngularJS $scope 变量设置一个 div background-image。 这就是我所拥有的：

$scope.destination1 = 'web/images/' + obj.FirstPerson + '.png';

然后在标记中，我有这个：

<div style="background-image:url(destination1)"  class="destination"></div>

我此时正在学习 AngularJS，如果这对于那些熟悉 AngularJS 工作原理的人来说看起来很愚蠢，请原谅。我们可以这样做吗？

更新

在第一次回复之后，我进行了更改，现在 div 看起来像这样：

<div id="destination" ng-style="{'background-image':'url({{destination1}})'}"  class="destination"></div>

在浏览器中翻译成这样： http://i.gyazo.com/e9e08f738d8ea52ed1ca5e0338692f65.png

正如您所见，虽然 ng-class 属性已正确填充，但 background-image 属性来自任何地方，没有分配任何值。 知道发生了什么吗？

Answer 1

ng-style 的正确语法是：

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

JSFiddle : http://jsfiddle.net/U3pVM/7194/

你也可以使用自定义指令：

app.directive('backgroundImageDirective', function () {
    return function (scope, element, attrs) {
        element.css({
            'background-image': 'url(' + attrs.backgroundImageDirective + ')',
            'background-repeat': 'no-repeat',
        });
    };
});

例如：

<div ng-repeat="re in recipes">
<div background-image-directive="{{re.url}}" style="height: 100px"></div>
</div>

JSFiddle : http://jsfiddle.net/U3pVM/7193/

别忘了：

<div ng-style="'{{re.url}}' != '' && {'background-image':'url({{re.url}})'}" style="height: 100px"></div>

更新：

<div ng-controller="UserController" ng-app="myApp">
           <div ng-style="{'background-image':'url({{destination1}})'}" style="height: 100px"></div>
</div>

var app = angular.module('myApp', []);
app.controller("UserController", function ($scope) {

    $scope.destination1="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png";
});

JSFiddle : http://jsfiddle.net/U3pVM/7927/