angularjs - 带有多个参数的ui-sref subview 不起作用

Question

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

在我的 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”，这是所需的路线，但是页面内容

知道我哪里出错了吗？

编辑1 :在“ View ”对象中添加应该被换出的代码行。

编辑2:为了进一步演示这个问题，我添加了 Controller 代码块。当我点击第一个 html 链接时，我的控制台输出“项目状态命中!”当我单击任一非工作链接时，控制台没有新输出。即，路线很可能没有被击中。

Answer 1

弄清楚发生了什么。在仔细查看有关多个命名 View 的文档后 here ，我意识到我的 subview 正在父模板中搜索 ui-view 标签，而不是根模板。本质上，我的 child 试图嵌套在我的 parent 中，而我想要的行为是替换 parent 的观点。

因此，要在根目录中定位 ui-views，我的解决方案如下所示:

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