Можно ли загружать различные шаблоны с подключенными контроллерами в одной вкладке пользовательского интерфейса без перезагрузки состояния

Question

У меня есть пользовательский угловой ui-router для создания вложенных состояний в моем приложении. также используются абстрактные состояния, чтобы не перезагружать состояния.

Я использую вкладки uib для одного раздела, который является дочерним по отношению к другим состояниям, для одной вкладки мне нужно отображать различные шаблоны на основе события нажатия кнопки, такого как добавление, редактирование, просмотр, но эти действия определяются как различные состояния, так как используются разные шаблоны и контроллеры. для этих действий (страниц форм) он загружает шаблоны родительских состояний, а также вызовы API GET, которые не нужны, хотят загружать только шаблоны и контроллеры только для вкладок. Как я могу достичь этого или что может быть лучшим способом сделать это, как я новичок в угловой код JS, присоединяющий

// Код идет сюда

var loginInApp = angular.module('loginInApp', []);
loginInApp.config(function($stateProvider, $urlRouterProvider, $qProvider) {

$urlRouterProvider.otherwise('login');


$stateProvider

    .state('login', {
        url: '/login',
        views: {
           /* 'header': {
                templateUrl: 'header.html'
            },*/
            'login': {
                templateUrl: 'login.html',
                controller: 'LoginController',
             },
            'footer': {
                templateUrl: 'footer.html',
                controller: 'footerController'
            }
        }
     })
      .state('homeContainer', {
         url: '/homeContainer',
         templateUrl: 'homeContent.html',
         controller: 'homeContentController',
         controllerAs: 'homeContentCtrl',
         abstract : true,
         resolve:{              
        //webAPI calls
        }
     })

    .state('homeContainer.home', {
        url: '/home',
        views: {
            'header@homeContainer': {
                templateUrl: 'header.html',
                controller: 'HeaderController',
                controllerAs: 'Header',              
            },
            'folder@homeContainer': {//moved from home.content
                templateUrl: 'folder.html',
                controller: 'FolderController',
                controllerAs: 'Folder'
            },
            'content@homeContainer': {
                templateUrl: 'docAndNoteContent.html'
            },
            'emailSection@homeContainer': {
                templateUrl: 'emailSection.html',
                controller: 'EmailController',
                controllerAs: 'Email'
            },
            'footer@homeContainer': {
                templateUrl: 'footer.html',
                controller: 'footerController'
            }
        },
        abstract : true
    })
    .state('homeContainer.home.content', {
            url: '/content',
            views: {
                '[e-mail]': {
                    templateUrl: 'documentAndNoteSection.html',
                    controller: 'documentAndNoteSectionController',
                    controllerAs: 'DocumentAndNotes'
                },
                '[e-mail]': {
                    templateUrl: 'inbox.tpl.html',
                    controller: 'inboxController',
                    controllerAs: 'inbox'
                },
                '[e-mail]': {
                    templateUrl: 'outbox.tpl.html',
                    controller: 'outboxController',
                    controllerAs: 'outbox'
                },
                '[e-mail]': {
                    templateUrl: 'contacts.tpl.html',
                    controller: 'ContactController',
                    controllerAs: 'Contact'
                },
                '[e-mail]': {
                    templateUrl: 'composeMail.tpl.html',
                    controller: 'composeMailController',
                    controllerAs: 'composeMail'
                },
                '[e-mail]': {
                    templateUrl: 'historyLog.tpl.html',
                    controller: 'historyLogController',
                    controllerAs: 'historyLog'
                },
                '[e-mail]': {
                    templateUrl: 'sharedItems.tpl.html',
                    controller: 'sharedItemsController',
                    controllerAs: 'sharedItems'
                }
            }
            abstract : true
    })
    .state('homeContainer.home.content.baseHomeState', { 
            url: '/baseHomeState',
            views: {
                '[e-mail]': {
                    templateUrl: 'document.html',
                    controller: 'DocumentController'
                },
                '[e-mail]': {
                    templateUrl: 'note.html',
                    controller: 'NoteController',
                    controllerAs: 'Note'
                }
            }
    })
    .state('homeContainer.home.content.baseHomeState.addContact', { 
        url: '/addContact',
        views: {
            '[e-mail]': {
                templateUrl: 'addContact.html',
                controller: 'AddContactController',
                controllerAs: 'AddContact'
             }
        }
    })

    .state('homeContainer.home.content.baseHomeState.editContact', { 
        url: '/editContact',
        views: {
            '[e-mail]': {
                templateUrl: 'editContact.html',
                controller: 'EditContactController',
                controllerAs: 'EditContact'
            }
        }
    });

Answer 1

Разрешается состояние перезагрузки UI-Router без полного обновления страницы$state.go(parenttatename, {}, {reload: "имя дочернего состояния"}); после перезагрузки дочернего состояния он не перезагружается, родитель помещает дочернее состояние в перезагрузку