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

【问题标题】：Problems with implementing separate controller for each md-tab为每个 md-tab 实现单独控制器的问题
【发布时间】：2016-07-13 22:37:34
【问题描述】：

我的模板 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 和 AwardSettings html 和控制器。我知道我的路线运行正常。但我的问题是我希望在他们的标签中包含 basicConfig.html 和 AwardSettings.html 的内容。但这行不通。当我单击选项卡时，它如下所示

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

【问题讨论】：

控制台有错误吗？
你能把你的代码放在 pluker 里吗？
@Mathews：不，控制台中没有错误。
@troig 。我是 plunker 的新手plnkr.co/edit/uS4YCZ9ytqDgBO6BgU1S?p=preview 这是我上传到 plunker 的代码。但是由于某种原因，在 plunker 上运行时 md-tabs 没有显示出来。不知道我是否需要在代码中添加一些其他库。同样的代码在我的机器上工作
检查浏览器中的控制台是否有错误，您有混合导入并且缺少 angular-aria 和一些其他要求。您还包括 2x 角度。

标签： javascript angularjs angular-ui-router angular-material

【解决方案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'
  })

}

【讨论】：