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

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

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

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

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

1 个答案: