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

Question

我正在使用angular-slick库通过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调用从服务器获取响应。 兑现承诺后，只有其应填充articleSlide范围变量。 在模板中，对articlesSlide变量进行ng-show检查，以便在该变量为null时不显示任何内容（直到时间承诺得到解决）

资料：

角度承诺

例