Question

我的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错误，但它并不是一直发生，而是有时会发生。虽然正在检索所有图像并在页面上正确显示。这可能是什么问题？

Answer 1

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

请记住，当angular编译它时，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.

不评估模板内的变量

1 个答案: