javascript - $state.go() 不路由到其他状态，url 中的 #/null

Question

使用 Angular ui-router 我尝试使用 $state.go() 在使用 blogCreate 创建新条目后更改为 blogEdit 状态，以便在保存后继续编辑。当我单击保存并触发 addPost() 方法时，它无法正确重定向，并且我在地址栏中看到 /#/null 作为路由，而不是预期的 /blog/post/: postId/编辑。

blogModule.controller('PostCreateController', ['$scope', '$state', '$stateParams', 'PostResource',
    function ($scope, $state, $stateParams, PostResource) {
        $scope.post = new PostResource();
        $scope.addPost = function () {
            $scope.post.$save(function () {
                $state.go('blogEdit', {postId: $stateParams.postId}); // THIS SHOULD REDIRECT TO CONTINUE EDITING POST
            });
        }
    }
]);

blogModule.controller('PostEditController', ['$scope', '$stateParams', 'PostResource',
    function ($scope, $stateParams, PostResource) {
        $scope.post = PostResource.get({postId: $stateParams.postId});
        $scope.updatePost = function () {
            $scope.post.$update({postId: $stateParams.postId});
        }
    }
]);

状态路由配置:

var app = angular.module('app', [
    'ui.router',
    'blogModule'
]);

app.config(['$stateProvider', function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('blog', {
            url: '/blog',
            templateUrl: 'app/blog/view/blog-list.html',
            controller: 'PostListController'
        })
        .state('blogView', {
            url: '/blog/post/{postId:[0-9]}',
            templateUrl: 'app/blog/view/blog-detail.html',
            controller: 'PostViewController'
        })
        .state('blogCreate', {
            url: '/blog/post/new',
            templateUrl: 'app/blog/view/blog-create.html',
            controller: 'PostCreateController'
        })
        .state('blogEdit', {
            url: '/blog/post/{postId:[0-9]}/edit',
            templateUrl: 'app/blog/view/blog-edit.html',
            controller: 'PostEditController'
        });
}]);

无论我尝试更改为什么状态，它似乎都会执行此操作。

Answer 1

我想您正在后端保存您的帖子。当您执行保存(PUT)操作时，您的后端应该返回一些响应。响应应该类似于 HTTP 201 Entity created 并且应该设置位置属性(例如 http://example.com/blog/post/1)。然后你可以从位置 header 获取 id，如下所示:

$scope.post.$save(function (createdPost, headers) {
    var postId = headers.location.split("/").pop();
    $state.go('blogEdit', {postId: postId});
});

另一种方法是忽略 header 并从后端返回 json 响应。 F.e. {"postId": 1, "title": "新帖子", ...}。然后你可以这样做:

$scope.post.$save(function (createdPost) {
    $state.go('blogEdit', {postId: createdPost.postId});
});

最重要的是了解后端的 API(“它返回什么”)。