在一条路线中加入和编辑

时间:2015-01-22 07:06:32

标签: angularjs routing angular-ui-router

我想知道天气我可以加入两条路线 - 添加和编辑。 以下是我的陈述:

.state('app.topics.add', {
    url: 'add/',
    views: {
        'page@app': {
            templateUrl: 'app/sites/topics/add.html',
            controller: 'topicsaddCtrl'
        }
    }
})
.state('app.topics.details', {
    url: '{topic_id:[0-9]+}/',
    views: {
        'page@app': {
            templateUrl: 'app/sites/topics/details.html',
            controller: 'topicsdetailsCtrl'
        }
    }
})
.state('app.topics.details.edit', {
    url: 'edit/',
    views: {
        'page@app': {
            templateUrl: 'app/sites/topics/add.html',
            controller: 'topicsaddCtrl',
        }
    }
})

topic/add/ - 添加主题 topic/2/ - 主题的详细信息 topic/2/edit/ - 编辑主题 但添加和编辑的状态使用相同的模板和控制器。我可以简单地说明一下吗?

1 个答案:

答案 0 :(得分:0)

您可以使用stateParams https://github.com/angular-ui/ui-router/wiki/URL-Routing

.state('app.topics.add', {
            url: ':method/:id',
            views: {
                'page@app': {
                    templateUrl: 'app/sites/topics/add.html',
                    controller: 'topicsaddCtrl',
                }
            },
            resolve: {
                formData: ['$stateParams', 'topicSvc', function ($stateParams, topicSvc) {
                    if ($stateParams.method === 'add') {
                        return {}; //return empty object if you creating topic
                    } else if ($stateParams.method === 'edit' && $stateParams.id) {
                        return topicSvc.getDetail($stateParams.id); //get topic data from topicSvc service
                    }
                }]
            }
        })

此外,您可以将$ stateParams注入您的控制器并访问其'method'和'id'属性。