Angular UI-Router解決方案在AJAX完成之前不會阻止狀態更改

我正在使用Uncoupled CMS後端和Angular/Node/Express前端爲我的公司構建新的編輯網站。Angular UI-Router解決方案在AJAX完成之前不會阻止狀態更改

我有四種不同類型的文章;每篇文章都有一個標誌（數字）表示它是什麼類型的文章。我使用ng-switch來查看這個標誌，然後顯示正確的視圖。

不幸的是，視圖模板在我的AJAX請求完成之前保持渲染，導致完全白頁。我嘗試了實現UI-Router Resolve功能來解決這個問題，並且當我成功地完成AJAX請求時，我的文章仍然沒有被渲染，並且模板加載得太快。

這是我的控制器：

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

這是我的國家提供的相關部分：

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' 
       }, 
       "[email protected]": { 
        templateUrl: '/app/post/lead.view.html' 
       }, 
       "[email protected]": { 
        templateUrl: '/app/post/quick.view.html' 
       }, 
       "[email protected]": { 
        templateUrl: '/app/post/short.view.html' 
       }, 
       "[email protected]": { 
        templateUrl: '/app/post/video.view.html' 
       } 
      } 
     })

這是決定哪些文章類型應顯示模板：

<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>

我在這裏錯過了什麼嗎？我認爲Resolve的意義在於，只有在AJAX請求完成並且我可以使用這些數據後才能呈現模板？如果情況並非如此，有沒有人有任何建議？

來源

2016-04-14 cortharlow

我會嘗試創建一個服務來保存您的帖子，並將其注入getPost函數以及您的控制器。然後，在狀態解析期間獲取AJAX響應時，可以在.then函數中調用PostService.updatePost(response.data)。而你的vm.thisPost = getPost將變成vm.thisPost = PostService.currentPost。

來源

2016-04-14 22:34:40 MTietze

Angular UI-Router解決方案在AJAX完成之前不會阻止狀態更改

回答

相關問題