代码之家 › 专栏 › 技术社区 › brazorf

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

angular-ui-router angularjs

0

brazorf · 技术社区 · 8 年前

真的不知道这里发生了什么,我以前做过很多次。

以下配置导致根态即使路由与子状态匹配也要执行。

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 获取/应用程序/近地天体/

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

案例2 获取/apps/neo/a/1

我得到了 apps-neo-a 状态激活,这是正确的。控制台日志一视图显示一 .

有什么想法吗?

2 回复 | 直到 8 年前

1

lzagkaretos 8 年前

你应该再加一个 ui-view 在父状态中,以便呈现嵌套状态。

例如:

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

2

0

Amala Paulson 8 年前

问题是您没有在父模板中声明ui视图。

当应用程序处于特定状态时当一个状态为“活动”时,它的所有祖先状态也都隐式地处于活动状态。

子状态将其模板加载到其父级的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'
});

}