模板内的变量不计算

我有玉的标记看起来像这样：模板内的变量不计算

li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") 
    .parcel-image(style="background-image:url({{parcel.image}});")

出于某种原因，有时我得到404错误，而它试图获取http://localhost:3501/%7B%7Bparcel.image%7D%7D，它不发生的事情，但有时。尽管所有图像都正在检索并正确显示在页面上。这里有什么问题？

来源

2013-02-15 Sergei Basharov

'风格=“背景图像：网址（{{parcel.image}}） ;'不关闭 – iMom0 2013-02-15 12:34:55

@ iMom0，这里只是一个拼写错误，修正了，谢谢。在源代码中没有问题。 – 2013-02-15 12:39:45

http://localhost:3501/%7B%7Bparcel.image%7D%7D是http://localhost:3501/{{parcel.image}}

记住，HTML实际上是在DOM时的角度进行编译。因此，您的浏览器（对于一个短暂的时刻，应用程序白手起家之前），其在DOM是这样的：

<div class="parcel-image" style="background-image:url({{parcel.image}})">...</div>

而当它看到的样式属性，它击中/{{parcel.image}}您的服务器。

这就是为什么你偶尔会遇到404。

编辑：您可以使用the ngStyle directive来解决这个问题：

的ngStyle指令将观看对象，并将其应用于包含样式。

因此，在你的HTML：

<div class="parcel-image" ng-style="styles">...</div>

而在你的控制器：

app.controller('ParcelImageController', function($scope) { 
    $scope.parcel = {/*some object*/}; 
    $scope.style = { 
    'background-image': 'url(' + $scope.parcel.image + ')' 
    }; 
});

Here a fiddle with an example of this in action.

来源

2013-02-15 17:43:41 satchmorun

感谢您的解释。现在，我如何解决这个问题在大多数情况下行事快捷方式？我想，我将{{parcel.image}}值放入另一个属性中，比如data-image =“{{parcel-image}}”，那么如何在角度载入所有值时更好地将style属性与相应的值相加内部的东西和范围？ – 2013-02-18 10:57:19

再次查看我的答案 - 我添加了一个解决方案。 – satchmorun 2013-02-18 18:03:59

模板内的变量不计算

回答

相关问题