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

Javascript 我可以使用$scope变量作为div背景图像吗,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,我试图通过AngularJS$scope变量设置一个div背景图像。 这就是我所拥有的: $scope.destination1 = 'web/images/' + obj.FirstPerson + '.png'; 然后在标记中,我有以下内容: <div style="background-image:url(destination1)" class="destination"></div> 我现在正在学习Angular

我试图通过AngularJS$scope变量设置一个div
背景图像。
这就是我所拥有的:

$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>

在浏览器中转换为以下内容:

正如您所看到的,尽管ng类属性已正确填充,但背景图像属性却没有指定任何值。
知道发生了什么吗?

ng风格的正确语法是:

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

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

JSFiddle:

别忘了:

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

var-app=angular.module('myApp',[]);
app.controller(“用户控制器”,函数($scope){
$scope.destination1=”http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png";
});

JSFiddle:

你好,谢谢。我可以使用$scope.destination1变量而不是re.url吗?您可以使用{{{destination1}}@user3763877请检查我在初始内容中提出的更新问题,谢谢您使用的是哪个版本?
<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";
});