javascript - 从 Angular http 调用加载数据和背景图像后

Question

在我的 Controller 中，我有一个像这样的 http 调用:

$http.get("/api/content").success(function(data){
  $scope.entry = data;
});

$scope.entry 现在看起来像这样:

{
  name: "Test name",
  about: "Some information here",
  image: "//www.example.com/my-image.jpg"
}

现在我像这样在 HTML 中呈现结果:

<div class="block">
  <div>{{entry.name}}</div>
  <div>{{entry.about}}</div>
  <div ng-style="{'background-image':'url(' + entry.image + ')'}"></div>
</div>

效果很好。现在我只希望 block 在 http 调用完成后显示，文本应用于范围并在 HTML 中呈现，并且加载背景图像。所以基本上当 block 完全加载时，它就可以显示了。

所以我最初将 CSS 设置为隐藏该 block ，然后想在准备好时将一个类应用于该 block :

.block {
  opacity: 0;
  transition: opacity 300ms; }

.block.ready { opacity: 1; }

我的问题是，如何检测背景图像何时加载？ 我的网站上有很多这样的 block ，每个 block 都有不同的内容，所以我需要多次执行此操作。

Answer 1

你为什么不用ng-show。只需在 $http 回调中使其为真即可。

<div class="block" ng-show="show">
  <div>{{entry.name}}</div>
  <div>{{entry.about}}</div>
  <div ng-style="{'background-image':'url(' + entry.image + ')'}"></div>
</div>

在 $http 回调中:

$http.get("/api/content").success(function(data){
  $scope.entry = data;
  $scope.show=true;
});