Question

我知道这是一个问题很好但可能是我的＆＃34; googleing＆＃34;技能不足以让我得到我想要的东西。

所以我有一个ng-view的主页 index.html

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

现在我的视图中包含 student.html

的模板网址

<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我想要三个视图（子视图是正确的），每个视图都有自己的模板。

路由代码是这样的：

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）与引用语法（viewname@statename）混合使用。因此，请尝试省略模板中的student.。

另外你应该在状态配置中注册你的控制器（可能是一个共同的父状态），而不是直接注册模板...

Answer 2

我已经制作了类似于你的代码的jsfiddle，它确实有效。主要区别在于您不应在ui-view指令中使用student.

作为前缀嵌套视图的前缀

http://jsfiddle.net/irhabi/3ozfxmfx/

<md-tab label="View Profile" ui-view="profile"></md-tab>
<md-tab label="View Results" ui-view="result"></md-tab>
<md-tab label="View Attendance" ui-view="attendance"></md-tab>

ui.router没有显示页面[嵌套视图]

2 个答案: