为每个md-tab实现单独控制器的问题

Question

我的模板HTML文件'testview.html'如下所示：

<div class="container-fluid">
    <md-toolbar>
        <h2 class="md-toolbar-tools">
            <span>Test View</span>
        </h2>
    </md-toolbar>
    <md-tabs md-stretch-tabs
             md-selected="selectedIndex">
        <md-tab label="basicConfig">
        </md-tab>
        <md-tab label="awardSettings">
        </md-tab>
    </md-tabs>

    <div id="content" ui-view flex> </div>
</div>

这是我的路线控制器'testview.js'：

angular
.module('app.testview')
.controller('TestView', TestView)
.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
    .state('basicConfig', {
        url: '/basicConfig',
        templateUrl: 'app/testview/testview_partials/basicConfig.html',
        controller: 'BasicConfig as vm'
    })
    .state('awardSettings', {
        url: '/awardSettings',
        templateUrl: 'app/testview/testview_partials/awardSettings.html',
        controller: 'AwardSettings as vm'
    })
}]);

TestView.$inject = ['$state', '$scope', '$location'];

function TestView(state, $scope, $location) {
    $scope.selectedIndex = -1;

    $scope.$watch('selectedIndex', function(current, old) {
        switch (current) {
            case 0:
                $location.url("/basicConfig");
                break;
           case 1:
                $location.url("/awardSettings");
                break;
        }
    });

}

这是我的awardSettings.html的样子：

<form name="awardSettingsForm" id="awardSettingsForm">
    <md-content flex layout-padding layout="row" layout-sm="column" layout-align-sm="space-between start" layout-align="space-between center">
        <label style="font-size: 24px;">Award Settings</label>
    </md-content>
</form>

我有我的basicConfig＆amp; awardSettings html＆amp;控制器在单独的文件中定义我知道我的路线工作正常。但我的问题是我想要basicConfig.html＆amp;的内容。在他们的标签中的awardSettings.html。但那不起作用。单击选项卡时，IT看起来如下所示

任何帮助将不胜感激。谢谢！

Answer 1

没关系。我弄清楚我做错了什么。不得不改变子状态成为主要状态的一部分即。将状态从'basicConfig'更改为'testview.basicConfig'。

<script src='/js/home-page.js'></script>

}