不评估模板内的变量答案

【问题标题】：Variables inside a template are not evaluated不评估模板内的变量
【发布时间】：2013-02-15 12:05:48
【问题描述】：

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

【问题讨论】：

style="background-image:url({{parcel.image}}); 未关闭。
@iMom0，这里只是一个拼写错误，已修复，谢谢。在源代码中很好。

标签： javascript html css angularjs

【解决方案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>

当它看到 style 属性时，它会使用/{{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.

【讨论】：

感谢您的解释。现在，我怎样才能以最紧凑的快速方式解决这个问题？我想，我将 {{parcel.image}} 值放入另一个属性中，例如 data-image="{{parcel-image}}"，然后如何在 Angular 加载所有属性时更好地添加具有相应值的样式属性内部的东西和范围？
再次查看我的答案 - 我添加了解决方案。