ui.router未顯示頁面[嵌套視圖]

Question

我知道這是一個很好的問題，但可能是我的“ Google”技能不足以讓我得到我想要的東西。

所以我有一個帶有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>