爲每個MD-標籤執行單獨的控制器問題

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 & awardSetti在單獨的文件中定義的控制器。我知道我的路線工作正常。但我的問題是，我想在他們的選項卡中使用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' 
    }) 

}