Question

我正在努力让嵌套状态使用UI路由器

我想要一个页面来查看设备，使其具有/device/SERIAL_NUMBER/info所在的网址

/device已修复
/SERIAL_NUMBER是变量aka :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

此处的网址应以'/'

开头

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

将支持网址连接

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

嵌套状态UI路由器

1 个答案: