CODEWITHSUNDEEP
javascriptangularjsangular-ui-routernested-views
nick.cook
nick.cook

Reputation: 2141

Angular ui-router nested views - No content appears

I'm trying to implement nested views for a page using angular ui-router and have configured the state definitions matching various tutorials, but can't get any content to show up for the child views, despite having no errors in the console.

I'm trying the following with parent.child dot notation for the state names:

.state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:id',
        templateUrl: 'pages/employees/employeeDetails/employeeDetails.html',
        controller: 'employeeDetailsController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsController.js');
            }
        }
    })

    .state('employees/employeeDetails.mainDetailsTab', {
        url: '/employees/employeeDetails/:id/mainDetails',
        templateUrl: 'pages/employees/employeeDetails/mainDetailsTab.html',
        controller: 'mainDetailsTabController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/mainDetailsTabController.js');
            }
        }
    })

-

HTML:

<div id="mainContent" data-simplebar>

  <div ui-view="mainDetailsTab" id="mainTab" class="tabContent carousel-item employeeDetailsTab"></div>

  <div ui-view="paymentsTab" id="paymentsTab" class="tabContent carousel-item employeeDetailsTab"></div>

  etc...

Upvotes: 0

Views: 55

Answers (1)

Nicolas S.
Nicolas S.

Reputation: 329

You don't need to redefine the entire path to the url property, just put the addition.

In this case: url:'/mainDetails'

Upvotes: 0

Related Questions