CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-material
wraith
wraith

Reputation: 401

Problems with implementing separate controller for each md-tab

My template HTML file 'testview.html' looks like this:

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

This is my route 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;
        }
    });

}

Here's what my awardSettings.html looks like:

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

I have my basicConfig & awardSettings html & controllers defined in separate files. I know that my routes are working correctly. But my problem is that I want the contents of basicConfig.html & awardSettings.html within their tabs. But that's not working. IT looks like below when I click on the tab enter image description here

enter image description here

Any help would be appreciated. Thanks!

Upvotes: 2

Views: 187

Answers (1)

wraith
wraith

Reputation: 401

Never mind. I figured out what I was doing wrong. Had to change sub states to be part of the main state ie. change state from 'basicConfig' to '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'
  })

}

Upvotes: 1

Related Questions