Question

我有一个使用ng-repeat动态填充的列表。该列表由缩略图和标题组成。

过滤器工作正常，但是，一旦使用过滤器并重置缩略图。原因是当我加载我的缩略图时，我从需要特定散列URL的CDN加载，我可以将其设置为活动X秒。在我的情况下，我保持链接活着10秒。有足够的时间加载一个小缩略图。

重置过滤器时，过滤器似乎正在重新加载图像（使用散列URL）。问题是此时，URL不再有效。有没有办法更改filter以将列表项的可见性设置为无，而不是完全删除它并重新加载对象？

我的代码在

下面

<ul id="list" class="unstyled">
  <li ng-repeat="slide in data | filter:searchQuery">
    <span class="thumbnail glow" style="background: url({{currentThumb}})" index="{{$index}}" sprite-thumb></span>
    <span class="listItemText">
      <b>{{slide.slideIndex + 1}}. </b>{{slide.title}}
    </span>
  </li>
</ul>

Answer 1

我的问题是我的sprite-thumb指令。在指令中，我有$observe观看style attr，当列表过滤$observe函数时，会再次被触发。

我决定放弃指令，而不是style="background: url({{currentThumb}})"

我明确地使用ng-style这样：

ng-style="{'background-image' : 'url(' + currentThumb + ')', 'background-position' : getSpriteStyle(slide.slideIndex)}"

getSpriteStyle()是：

$scope.getSpriteStyle = function(id)
{
    return '0 ' + -(id * 80) + 'px';
}

该函数在background-position

上设置background-image属性

在列表上调用过滤器

1 个答案: