Question

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

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类似，并且应该设置位置属性（f.e。http://example.com/blog/post/1）。然后你就可以从这个位置标题获取id：

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

另一种方法是忽略标头并从后端返回json响应。 F.E. {"postId": 1, "title": "New post", ...}。然后你可以做类似的事情：

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

最重要的是要知道你后端的API（“它返回什么”）。

$ state.go（）没有路由到其他状态，＃/ null在url中

1 个答案: