javascript - 不评估模板内的变量

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>

在你的 Controller 中:

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.