Probleme mit der Umsetzung separaten Controller für jede md-Registerkarte

Question

Meine Vorlage HTML-Datei 'testview.html' sieht wie folgt aus:

<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> 

Das ist mein Weg 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; 
     } 
    }); 

} 

Hier ist, was meine awardSettings.html wie folgt aussieht:

<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> 

ich meine basicConfig & awardSetti haben ngs html & Controller in separaten Dateien definiert. Ich weiß, dass meine Routen korrekt funktionieren. Aber mein Problem ist, dass ich den Inhalt von basicConfig.html & awardSettings.html in ihren Tabs möchte. Aber das funktioniert nicht. Es sieht aus wie unten, wenn ich auf der Registerkarte klicken

Jede Hilfe würde geschätzt. Vielen Dank!

Answer 1

Macht nichts. Ich habe herausgefunden, was ich falsch mache. Musste Unterstaaten ändern, um Teil des Hauptstaats zu sein, dh. Ändern Sie den Status von 'basicConfig' in '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' 
    }) 

}