Question

我刚开始在实时项目中使用AngularJS和ui-router。

我目前在构建路线方面遇到了困难。

应用场景是：对于一个灾难，有多个操作。

网址结构如下：

灾难：台风

http://localhost/#/timeline/typhoon

灾难：有行动编号的台风

http://localhost/#/timeline/typhoon/52

我目前有一个timeline抽象状态，但遇到了麻烦。

.state('timeline', {
    abstract: true,
    url: '/timeline',
    templateUrl: 'timeline.html',
    controller: 'TimelineCtrl'
.state('timeline.calamity', {
    url: '/{calamity}',
    templateUrl: 'timeline.calamity.html',
    controller: 'TimelineCtrl'
})
.state('timeline.calamity.operation', {
    url: '/{operationID}',
    templateUrl: 'timeline.calamity.operation.html',
    controller: 'TimelineCtrl'
})

当我将其设置为让timeline父级有网址时，operation路由无法正确加载。

.state('timeline', {
    abstract: true,
    url: '/timeline/{calamity}/{operationID}', // operationID should be optional here
    templateUrl: 'timeline.html',
    controller: 'TimelineCtrl'
})
.state('timeline.calamity', {
    url: '',
    templateUrl: 'timeline.calamity.html',
    controller: 'CalamityCtrl'
})
.state('timeline.operation', {
    url: '',
    templateUrl: 'timeline.operation.html',
    controller: 'OperationCtrl'
})

写这些路线的正确方法是什么？

Answer 1

你错过了一个参数url：

state('timeline.calamity', {
    url: '/:calamity',
...
})
.state('timeline.operation', {
    url: '/:operationID',
...
})

AngularJS ui-router表示结构

1 个答案: