我正在使用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請求完成並且我可以使用這些數據後才能呈現模板?如果情況並非如此,有沒有人有任何建議?