嵌套状态 UI 路由器

Question

我正在努力让嵌套状态与 UI 路由器一起工作

我想要一个查看设备的页面有一个 URL 像 /device/SERIAL_NUMBER/info where

/device固定
/SERIAL_NUMBER 是变量又名 :id
/info指的是嵌套状态

我有许多我想要的嵌套状态，但为简单起见，我只显示一个状态。请注意，对于 info 它与父视图共享相同的控制器，其他嵌套视图则不然。

状态设置

.state('device', {
    url: '/device/:id',
    templateUrl: '/views/devices/device.html',
    controller: 'viewDeviceController'
})
.state('device.info', {
    url: 'info',
    templateUrl: '/views/devices/device_info.html'
})

我的主要 HTML 看起来像这样

<body>
   <header><h1>Title</h1></header>
   <div ui-view>
       <!-- This is where /views/devices/device.html goes -->
   </div>

/views/devices/device.html 看起来像这样：

<div>General text about a device</div>
<div ui-view>
   <!-- This is where /views/devices/device_info.html should go -->
</div>

如果我导航到 /#/device/L340009，我看到主页和 device.html，我看不到 device_info.html - 这是预期的，但理想情况下我希望默认为加载第一条路线（信息）

如果我导航到 /#/device/L340009/info，它会将我重定向到家（这是我的 otherwise）所以路线有问题

我哪里错了？

Answer 1

这里的url要以'/'开头

.state('device.info', {
    // instead of this
    // url: 'info',
    // we need this
    url: '/info',
    templateUrl: '/views/devices/device_info.html'
})

将支持 url 串联

'/#/device/L340009' + '/info' 
is '/#/device/L340009/info'

嵌套状态 UI 路由器

Nested states UI Router

state

nested

angularjs

angular-ui-router