javascript - ui.router 不显示页面 [嵌套 View ]

Question

我知道这是一个经常被问到的问题，但可能是我的“谷歌搜索”技能不够好，无法得到我想要的东西。

所以我有一个带有 ng-view 的页面，它是主要的 index.html

<div class="row" style="margin-top: 70px;" ui-view></div>

现在我有一个模板网址为student.html的 View

<div class="col-md-10 col-md-offset-1" ng-controller="Controller_Parent">
<div ng-cloak>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="View Profile" ui-view="student.profile">
        </md-tab>
        <md-tab label="View Results" ui-view="student.result">
        </md-tab>
        <md-tab label="View Attendance" ui-view="student.attendance">
        </md-tab>
    </md-tabs>
</div>
</div>

正如代码所示，在 Controller_A 中，我想要三个 View ( subview 是正确的)，每个 View 都有自己的模板。

路由代码是这样的:

app.config(function($stateProvider, $urlRouterProvider) {    
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'templates/login.html',
    }).state('student',{
        url:'/student',
        views:{
            '@':{
                templateUrl: 'templates/student.html',
            },
            'profile@student':{
                templateUrl:'templates/student/profile.html'
            },
        }
    });
});

我应该做出哪些改变才能使这个想法发挥作用。我已经完成了这些教程，不幸的是它们都没有类似的工作原理，或者可能是我找错了空间。

等待您的输入。问候!

PS:不会抛出任何 JS 错误

Answer 1

看看https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names 。您似乎将 student.profile 之类的 View 名称与引用语法 (viewname@statename) 混合在一起。因此，请尝试在模板中省略 student.。

此外，您应该在状态配置中注册 Controller (可能具有公共(public)父状态)，而不是直接在模板中...