угловой: ngПоказать после загрузки json

Question

На главной странице приложения я претендую на два элемента - пост и видео. Но, несмотря на то, что позиция полюса видео находится в нижней части страницы, сначала загружается и только затем появляется в главном сообщении. Я хочу загрузить его только тогда, когда все сообщения.

.controller('PostsCtrl', function ($scope, $http, $sce, $ionicLoading) { 

    var postsApi = 'http://news.com/wp-json/post filter[posts_per_page]=20&_jsonp=JSON_CALLBACK'; 

    var _this = this 
    $ionicLoading.show({ 
     template: 'loading...' 
    }); 


    $http.jsonp(postsApi). 
      success(function (data, status, headers, config) { 
       $scope.posts = data; 
       $ionicLoading.hide(); 
      }). 
      error(function (data, status, headers, config) { 
       console.log('Post load error.'); 
      }); 


    var videoApi = 'http://news.com/wp-json/posts?filter[category_name]=video-of-interest&filter[posts_per_page]=4&_jsonp=JSON_CALLBACK'; 

// This should go in a service so we can reuse it 
    $http.jsonp(videoApi). 
      success(function (data, status, headers, config) { 
       $scope.video = data; 
      }); 

вид:

<ion-item class="main_post" ng-repeat="post in posts" ng-if="$index == 0" href="#/kikarnews/posts/{{post.ID}}"> 

      <div class="wrapper"> 

       <div class="main_img_home" style="background-image: url('{{ post.featured_image.attachment_meta.sizes.medium.url }}'); background-size: cover;" limage-lazy-background-image="true" image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="100"> </div> 

       <h3 class="cat_name_main"> {{post.terms.category[0].name}}</h3> 

      </div> 

      <h2 ng-bind-html="post.title"></h2> 




     </ion-item> 

     <ion-item ng-repeat="post in posts" ng-if="$index != 0" href="#/kikarnews/posts/{{post.ID}}"> 

      <div class="row main_home"> 


       <div class="col col-50 main_img_home"> 

        <img class="full-image" image-lazy-src="{{ post.featured_image.attachment_meta.sizes.medium.url }}" image-lazy-loader="android" image-lazy-distance-from-bottom-to-load="-200"> 
       </div> 


       <div class="col col-50 main_title_home"> 
        <h5>{{ post.date }}</h5> 


        <h2 ng-bind-html="post.title"></h2> 



       </div> 

      </div> 



     </ion-item> 
    </div> 



    <!---video--> 


    <ion-scroll zooming="true" direction="x"> 

     <div class="video_home"> 


      <ion-item ng-repeat="videoi in video" href="#/kikarnews/posts/{{videoi.ID}}"> 

        <img class="full-image" image-lazy-src="{{videoi.featured_image.attachment_meta.sizes.medium.url }}"> 

       <h2 ng-bind-html="videoi.title"></h2> 



      </ion-item> 
     </div> 

     </ion-scroll> 

Answer 1

так на вас HTTP называть вас есть успех и обратный вызов ошибки, вы также можете добавить обратный вызов, просто привяжите переменную видео в обратном вызове. Он будет вызываться только после завершения завершения загрузки всех данных. Это будет выглядеть так

$http.jsonp(postApi).success(function(data,status,headers,config){ 

}).error(function(data, status, headers, config){ 

}).then(function(data,status,headers,config){ 
//bind video url here 
$scope.video="urlhere" 
}) 

Answer 2

Если вы хотите, чтобы поджать данные до загрузки приложения вы можете использовать маршрут контроллер resolve свойство - проверить этот ответ Delaying AngularJS route change until model loaded to prevent flicker