Угловой UI-маршрутизатор не обновляет вид макета

Question

Я застрял на этом часами. Распределение двух столбцов загружается, но представления состояний этого не делают. Все пути просмотра верны, и я не получаю никаких ошибок. Я искал ответы на вопросы, и ничего не мог найти.

angular.module('App', [ 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngSanitize', 
    'ngTouch', 
    'firebase', 
    'firebase.ref', 
    'firebase.auth', 
    'ui.router' 
    ]) 
    .config(['$stateProvider', 
     function($stateProvider) { 

      $stateProvider 
       .state('root', { 
        url: '', 
        abstract: true, 
        views: { 
         'layout': { 
          templateUrl: 'views/partials/layout/1-column.html' 
         } 
        } 
       }).state('root.home', { 
        url: '/', 
        views: { 
         'layout@': { 
          templateUrl: 'views/partials/layout/2-column.html' 
         }, 
         'header': { 
          templateUrl: 'views/partials/layout/sections/header.html' 
         }, 
         'sidebar': { 
          templateUrl: 'views/partials/layout/sections/sidebars/loginSidebar.html' 
         }, 
         'main': { 
          templateUrl: 'views/partials/layout/sections/main.html' 
         }, 
         'footer': { 
          templateUrl: 'views/partials/layout/sections/footer.html' 
         } 
        } 
       }) 
    }]) 

Вот HTML код:

index.html

<div class="container"> 
     <div ui-view="layout"></div> 
    </div> 

1-column.html

<div> 
    layout 1 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 



    <section class="main col-md-12"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div> 

2-column.html

<div> 
    layout2 
    <section class="col-md-12"> 
    <div ui-view="header"></div> 
    </section> 


    <section class="sidebar col-md-2"> 
     <div ui-view="sidebar"></div> 
    </section> 


    <section ngclass="main col-md-10"> 
     <div ui-view="main"></div> 
    </section> 

    <section class="col-md-12"> 
    <div ui-view="footer"></div> 
    </section> 
</div> 

Answer 1

Вы должны добавить относительный путь к представлениям в .state («root.home»):

'header' -> 'header@root.home' 
'sidebar' -> 'sidebar@root.home' 
'main' -> 'main@root.home' 
'footer' -> 'footer@root.home' 

См документ: https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

держать Также в виду, что в состоянии «корень» Ваш приложение не имеет информации о дочерних представлениях, таких как «нижний колонтитул» и «заголовок». В состоянии «root.home» это происходит, но ваше представление «layout» из состояния «root» будет переопределено представлением с тем же именем из состояния «root.home». Так или иначе, с вашим текущим подходом вы не получите двухколоночный макет :)

P.S. Также в вашем случае вы должны сделать одно состояние с двумя видами - одно для первого столбца и второе для второго.