I'm attempting to incorporate nested views for a webpage using angular ui-router. I have set up the state definitions according to various tutorials, but I am unable to display any content in the child views. Surprisingly, there are no errors showing up in the console.
Below is my approach using parent.child 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...