数据后&从Angular http调用加载背景图像

After data & background image load from Angular http call

本文关键字：调用 加载 背景 图像 http Angular 数据      更新时间：2023-09-26

在我的控制器中，我有一个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>

伟大的工作。现在，我只想在http调用完成、文本应用到范围并在HTML中呈现、背景图像加载之后显示该块。当代码块完全加载后，它就可以显示

所以我最初设置CSS来隐藏块，然后想在块准备好时应用一个类:

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

我的问题是，我如何检测何时加载背景图像?我的网站上有很多这样的块，都有不同的内容，所以我需要多次这样做。

你为什么不使用ng-show呢?只需在$http回调中设置为true即可。

<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;
});

将html放入ng-if中像

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

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

以便在响应来的时候创建block

相关文章：