AngularJS

Question

父路由不包含任何视图。我将子路由放在父路由中以共享其名称，以便 url 变成这样 .../sites/site1 或 .../sites/site2

$stateProvider
    .state('sites', {
        url: '/sites',
        abstract: true
    })
    .state('sites.site1', {
        url: '/site1',
        templateUrl: 'templates/site1.html'
    })
    .state('sites.site2', {
        url: '/site2',
        templateUrl: 'templates/site2.html'
    })
    // ...
    // Other routes

但是当我去 :

时这似乎不起作用

<a ui-sref="sites.site1">Go to first site</a>
<a ui-sref="sites.site2">Go to second site</a>

没有显示任何内容。（其他正常路由正常）

Answer 1

子项的父项中必须有一个目标：

.state('sites', {
    url: '/sites',
    abstract: true,
    // THIS line is essential, 
    // 1) it will inject the parent template into root 
    //    (index.html) ui-view=""
    // 2) and will also create a target for a child view
    template: '<div ui-view=""></div>',
})

原因是：子状态使用隐式视图命名，期望父状态有一些未命名的目标ui-view=""

AngularJS - 忽略父路由

AngularJS - Ignore parent route

angular-ui-router