javascript - 模板内的变量不计算

我的Jade标记如下所示：

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

出于某种原因，有时在尝试检索http://localhost:3501/%7B%7Bparcel.image%7D%7D时会出现404错误，虽然并非总是如此，但有时还是会发生。尽管所有图像都已被检索并正确显示在页面上。
这可能是什么问题？

最佳答案

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.