带有多个参数的ui-sref到子视图不起作用

Question

我正在我的应用程序上使用Angular的ui-router来尝试路由到主视图的子视图.main和child都有自己的关联ID.目前我可以导航到父母,但我与孩子的链接不起作用.

在我的Application.js中

$stateProvider

//Working Route
.state('Project', {
    url: '/Project/{projectId}',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectMainContent.html", 
            controller: function ($stateParams) {
                console.log("Project state hit!"); 
            }
         },
        ...
    }
})

//Non-Working Route
.state('Project.ViewResource', {
    url: '/Resource/:resourceId',
    parent: 'Project',
    views: {
        "ContentMain" : { 
            templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectResourceViewContent.html" 
            controller: function ($stateParams) {
                console.log("Project.ViewResource state hit!"); 
            }
        },
        ...
    }
});

在我的HTML中:

<!-- Working Link-->
<a ui-sref="Project({ projectId: 5 })"><h3>   My Projects </h3></a>

<!-- Non-working Links -->
<a ui-sref="Project.ViewResource({ projectId: 5, resourceId: 3 })">View Project Resource. </a>
<a ui-sref="Project.ViewResource({ resourceId: 3})">I'm a Resource Image. </a>

第一个链接有效,但是当我点击"非工作"子链接时,我的浏览器更新为:"Home/Index /#/ Project/5/Resource/3"这是所需的路由,但页面内容

知道我哪里错了吗？

Edit1:在'views'对象中添加应该交换的代码行.

Edit2:为了进一步说明这个问题,我添加了控制器代码块.当我点击第一个html链接时,我的控制台输出"Project state hit!" 当我单击任一非工作链接时,控制台没有新输出.即,路线很可能没有被击中.

Answer 1

弄清楚发生了什么.在这里仔细查看了多个命名视图的文档之后,我意识到我的子视图是在父模板中搜索ui-view标签,而不是根模板.基本上,我的孩子试图在我的父母中筑巢,而我想要的行为是替换父视图.

因此,为了在根目录中定位ui-views,我的解决方案看起来像:

.state('Project.Resource', {
    url: '/Resource/{resourceId}',
    parent: 'Project',
    views: {
        "MainControls@":   { templateUrl: "/Scripts/Dashboard/templates/MainControls/MainControls.html" },
        "ContentMain@": {
            ...
         },
         ...
     }
})