javascript - 为每个 md-tab 实现单独的 Controller 的问题

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>

这是我的路由 Controller “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 和 awardSettings html 和 Controller 。我知道我的路线工作正常。但我的问题是我想要 basicConfig.html 和 awardSettings.html 的内容在它们的选项卡中。但这是行不通的。当我点击选项卡时，它看起来像下面

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

没关系。我弄清楚我做错了什么。必须将子状态更改为主状态的一部分，即。将状态从“basicConfig”更改为“testview.basicConfig”。

function stateConfig ($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('testview.basicConfig', {
    templateURL: 'app/testview/testview_partials/basicConfig.html',
    controller: 'BasicConfig'
  })
  .state('testview.awardSettings', {
    template: '<h3>Award!!</h3>',
    controller: 'AwardSettings'
  })