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/

我激活了父状态，这是正确的。控制台记录父控制器，视图显示测试链接。

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

我仍然激活了父状态，这很奇怪。控制台记录父控制器，视图显示测试链接。

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

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'
    });
}

案例1 GET /apps/neo/

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

案例2 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。

当应用程序处于特定状态时 - 当状态为＆＃34;活动＆＃34; - 其所有祖先状态也是隐式活动状态。

子状态会将其模板加载到父级的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路由器子路由问题

2 个答案: