Açısal UI-Router AJAX Complete

Question

'dan önce durumun değişmesini engellemeyin Çözümü Uncoupled CMS arka ve Angular/Node/Express ön ucu ile şirketim için yeni bir editoryal web sitesi oluşturma aşamasındayım.

Dört farklı türde makalem var; Her makalede, ne tür bir yazı olduğunu gösteren bir bayrak (sayı) vardır. Bu bayrağa bakmak için ng anahtarını kullanıyorum ve uygun görünümü görüntüleyin.

Maalesef, görünüm şablonu, AJAX isteğim tamamlanmadan önce oluşturmayı sürdürerek tamamen beyaz bir sayfa oluşturuyor. Bunu düzeltmek için UI Yönlendirici Çözümleme işlevini uygulamayı denedim ve AJAX isteğini başarıyla tamamlarken, makalem hala oluşturulmuyor ve şablon çok hızlı yükleniyor.

angular 
    .module('glossy') 
    .controller('PostController', PostController) 

    PostController.$inject = [ 
    '$stateParams', 
    'storePostService', 
    'categoryFilterService', 
    'categoryPostsService', 
    'getPost']; 

    function PostController($stateParams, storePostService, categoryFilterService, categoryPostsService, getPost){ 

    // Instantiate variables 
    var vm = this; 
    vm.postTitle = $stateParams.title; 
    vm.categorySlug = $stateParams.category; 
    vm.thisPost = getPost; 
    vm.category = []; 
    vm.related = []; 

    getCategoryPosts(); 

    function getCategoryPosts(){ 
     return categoryPostsService.getCategoryPosts(vm.categorySlug) 
      .then(function(data){ 
      vm.related = data; 
      console.log(vm.related); 
      return vm.related; 
      }); 
     } 
    } 

Bu benim Devlet Sağlayıcısı ilgili parçasıdır::

Bu

benim denetleyicisi olan

angular 
     .module('glossy.states', []) 
     .config([ 
     '$stateProvider', 
     '$urlRouterProvider', 
     '$locationProvider', 
     function($stateProvider, $urlRouterProvider, $locationProvider){ 
      $stateProvider 
      .state('post', { 
       url: '/:category/:title', 
       views: { 
       "": { 
        controller: 'PostController as posts', 
        resolve: { 
        getPost: ['$http', '$stateParams', 
         function($http, $stateParams) { 
         var slug = $stateParams.title; 
         return $http.get('/api/' + slug) 
          .then(function(response){ 
          console.log(response.data); 
          return response.data; 
          }); 
         } 
        ] 
        }, 
        templateUrl: '/app/post/post.view.html' 
       }, 
       "lead@post": { 
        templateUrl: '/app/post/lead.view.html' 
       }, 
       "quick@post": { 
        templateUrl: '/app/post/quick.view.html' 
       }, 
       "short@post": { 
        templateUrl: '/app/post/short.view.html' 
       }, 
       "video@post": { 
        templateUrl: '/app/post/video.view.html' 
       } 
      } 
     }) 

Ve bu makalenin tipi gösterilmesi gereken belirler şablon:

<div ng-switch="posts.thisPost.acf.post_type"> 

     <!-- Lead Article --> 
     <div ng-switch-when="1"> 
     <div ui-view="lead" autoscroll="true"></div> 
     </div> 

     <!-- Quick Article --> 
     <div ng-switch-when="2"> 
     <div ui-view="quick" autoscroll="true"></div> 
     </div> 

     <!-- Quick Short Article --> 
     <div ng-switch-when="3"> 
     <div ui-view="short" autoscroll="true"></div> 
     </div> 

     <!-- Video Article --> 
     <div ng-switch-when="4"> 
     <div ui-view="video" autoscroll="true"><div> 
     </div> 
    </div> 

Burada bir şey mi eksik? Resolve'un, AJAX İsteği tamamlanıncaya kadar şablonun oluşturmayacağı ve verileri kullanabileceğimi düşündüm. Eğer durum böyle değilse, herhangi bir tavsiyesi var mı?

Answer 1

İletilerinizi tutmak için bir hizmet oluşturmayı ve denetleyicinizin yanı sıra getPost işlevine enjekte etmeyi denerim. Ardından, durum çözümü sırasında AJAX yanıtınızı aldığınızda, .then işlevinizde PostService.updatePost(response.data)'u arayabilirsiniz. Ve vm.thisPost = getPost, vm.thisPost = PostService.currentPost haline gelir.