AngularJS ui 子状态路由的路由器问题

Question

真的不知道这里发生了什么，我以前做过这件事数百万次。

即使路由与子状态匹配，以下配置也会导致 root state 被执行。

module.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('apps-neo',{
        url: '/apps/neo/',
        template: '<a ui-sref="apps-neo.a({id: 1})">test</a>',
        controller: function(){
            console.log('parent controller')
        },
        navbar: 'apps'
    }).state('apps-neo.a',{
        url: 'a/:id',
        template: 'a',
        controller: function($stateParams){
            console.log($stateParams.id)
        },
        navbar: 'apps'
    });
}

案例 1 GET /apps/neo/

我激活了父状态，这是正确的。控制台记录 parent controller 并且视图显示 test link.

案例二GET /apps/neo/a/1

我仍然激活父状态，这很奇怪。控制台记录 parent controller 并且视图显示 test link.

如果我更改为以下内容，基本上删除状态层次结构，一切都会按预期进行。

module.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('apps-neo',{
        url: '/apps/neo/',
        template: '<a ui-sref="apps-neo.a({id: 1})">test</a>',
        controller: function(){
            console.log('parent controller')
        },
        navbar: 'apps'
    }).state('apps-neo-a',{ // <------ do not make this state nest from previous
        url: '/apps/neo/a/:id',
        template: 'a',
        controller: function($stateParams){
            console.log($stateParams.id)
        },
        navbar: 'apps'
    });
}

案例一GET /apps/neo/

我激活了 apps-neo 状态，这是正确的。控制台日志 父控制器.

案例二GET /apps/neo/a/1

我激活了 apps-neo-a 状态，这是正确的。控制台记录 1 并且视图显示 a.

有什么想法吗？

Answer 1

您应该在父状态中添加另一个 ui-view，以便呈现嵌套状态。

例如：

template: `<a ui-sref="apps-neo.a({id: 1})">test</a>
           <hr/>
           <div ui-view></div>`,

Answer 2

问题是您没有在父模板中声明 ui-view。

当应用程序处于特定状态时（当状态为 "active" 时），其所有祖先状态也隐含地处于活动状态。

子状态会将其模板加载到其父状态的 ui 视图中。

在此处输入代码

module.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('apps-neo',{
    url: '/apps/neo/',
    template: '<a ui-sref="apps-neo.a({id: 1})">test</a><div ui-view</div>',
    controller: function(){
        console.log('parent controller')
    },
    navbar: 'apps'
}).state('apps-neo-a',{ // <------ do not make this state nest from previous
    url: 'a/:id',
    template: 'a',
    controller: function($stateParams){
        console.log($stateParams.id)
    },
    navbar: 'apps'
});

}

AngularJS ui 子状态路由的路由器问题

AngularJS ui router problems with substate routing

angularjs

angular-ui-router