具有多个参数的ui-sref对子视图无效 [英] ui-sref with multiple parameters to child view not working

问题描述

我在应用程序上使用Angular的ui-router尝试路由到主视图的子视图.主对象和子对象都有自己的关联ID.目前，我可以导航到父级，但是到孩子的链接无效.

I'm using Angular's ui-router on my application to try and route to child views of a main view. Both the main and the child have their own associated IDs. Currently I can navigate to the parent, but my link to the child is not working.

在我的Application.js中

In my 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"，这是所需的路由，但是页面内容

The first link works, however when I click either of the "non-working" child links my browser updates to: "Home/Index/#/Project/5/Resource/3" which is the desired route, however the page content

知道我要去哪里错了吗?

Any idea where I'm going wrong?

Edit1 :在应该换出的视图"对象中添加代码行.

Edit1: To add the lines of code in the 'views' object which should be swapping out.

Edit2 :为了进一步说明该问题，我添加了控制器代码块.当我点击第一个html链接时，我的控制台输出"Project state hit！".当我单击任何一个无效链接时，控制台都没有新的输出.即，该路线可能没有被击中.

To further demonstrate the issue, I've added the controller code blocks. When I hit the first html link, my console outputs "Project state hit!" When I click either of the non-working links, there is no new output to the console. Ie, the route is likely not being hit.

推荐答案

找出正在发生的事情.在此处上仔细查看了多个命名视图的文档后，我意识到我的子视图正在 parent 模板而不是 root 模板中搜索ui-view标签.本质上，我的孩子试图嵌套在父级中，而我想要的行为是替换父级视图.

Figured out what was happening. After taking a closer look at the document on multiple named views here, I realized that my child view was searching for ui-view tags within the parent template, rather than the root template. Essentially, my child was trying to nest within my parent, while my desired behavior was to replace the parent views.

因此，要在根目录内定位ui视图，我的解决方案应如下所示:

So, to target ui-views within the root, my solution looked like:

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

这篇关于具有多个参数的ui-sref对子视图无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！