Within my HTML page, I have implemented three tabs with each tab linked to a unique controller. The structure is as follows:
MainHTML (app.pages.managing.html):
<div id="DetailsViewContainer">
<div ng-if="selectedTab === 'tab1'">
<div ng-include="getTabUrl('tab1')" ng-controller="DetailsController"></div>
</div>
</div>
<div id="CoursesViewContainer">
<div ng-if="selectedTab === 'tab2'">
<div ng-include="getTabUrl('tab2')" ng-controller="CoursesController"></div>
</div>
</div>
<div id="UsersViewContainer">
<div ng-if="selectedTab === 'tab3'">
<div ng-include="getTabUrl('tab3')" ng-controller="UsersController"></div>
</div>
</div>
The main HTML file is already connected to the parent controller in the following manner:
'use strict';
angular.module('app.pages.manage').config([
'$routeProvider',
function($routeProvider, appSettingsProvider) {
$routeProvider
.when('/:lang?/group/landing/v2/manage/',
{
templateUrl: '/js/app/pages/manage/views/app.pages.managing.html',
controller: 'mainController'
});
}
]);
I am seeking a solution where upon clicking a tab, I can trigger the corresponding bonded controller without altering the URL configuration. Since I am using the ng-route module, utilizing the $state service from UI router is not feasible. I aim to avoid reloading the main controller and selectively reload only the desired sub-controller when switching tabs. Any suggestions on achieving this programmatically?