Question

我正在使用angular-slick library通过ng-repeat在幻灯片上显示项目。我通过异步调用API获得这些项目。我遇到的问题是模板是在API的响应之前呈现的。

这是我的控制器

    angular.module('myApp')
  .controller('homepageCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
    $http({method: 'GET', url: 'https://myapi.com/xxxxxx'}).
    success(function(data, status, headers, config) {
            $scope.articlesSlide = data.articles
    });
  }]);

这是我的模板

<slick infinite="true" dots="true" arrows="true">
          <div ng-repeat="articleSlide in articlesSlide">

          <a href="/{{articleSlide.cat}}/articulo/{{articleSlide.slug}}" class="dentro" title="Ver noticia">
            <div class="imagen"><img ng-src="{{articleSlide.image}}" alt="{{articleSlide.title}}" /></div>
            <div class="texto">
              <div class="inner">
                <div class="cat">{{articleSlide.0.cat}}</div>
                <h2>{{articleSlide.title}}</h2>
              </div>
            </div>
          </a>

          </div>
          </slick>

Answer 1

您需要使用promise才能等待http调用从服务器获取响应。在解析promise之后，只应该填充articlesSlide范围变量。在模板中对articlesSlide变量进行ng-show检查，这样当它为null时，则不会显示任何内容（直到时间承诺得到解决）

文件：

Angular Promise

Example

在AngularJs中的API响应之前呈现模板

1 个答案: