Несколько вложенных состояний AngularJS ui-router

Question

Простите, если это глупый вопрос, но я новичок в AngularJS, и для жизни я не могу понять, почему эта вложенная настройка представления работает не так, как ожидалось.

У меня есть верхнего уровня <div>:

<div class="grid" ui-view></div> 

Который имеет модуль населяющих его вид:

angular.module('planttheidea',[ 
    'ui.router', 
    'planttheidea.header', 
    'planttheidea.mainContent', 
    'planttheidea.footer' 
]) 
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
     $stateProvider 
      .state('base',{ 
       url:'', 
       views:{ 
        '':{ 
         templateUrl:'app/layout.view.html', 
         controller:'LayoutCtrl' 
        } 
       } 
      }); 

     $urlRouterProvider.otherwise('/'); 
    }]) 
    .controller('LayoutCtrl',function LayoutCtrl($scope,$stateParams){ 
     var layout = this; 
    }); 

Я тогда содержимое этой точки зрения компоновки:

<header ui-view="header" class="header menubar col-p-100" ng-controller="HeaderCtrl"></header> 
<main ui-view="main-content" class="main-content grid col-p-100" ng-controller="MainContentCtrl"></main> 
<footer ui-view="footer" class="footer col-p-100" ng-controller="FooterCtrl"></footer> 

И прямо сейчас у меня есть верхний и нижний колонтитулы со своими модулями:

angular.module('planttheidea.header',[ 
    'planttheidea.header.menu' 
]) 
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){ 
     $stateProvider 
      .state('base.header',{ 
       url:'', 
       views:{ 
        'header@base':{ 
         templateUrl:'app/components/header/header.view.html', 
         controller:'HeaderCtrl as layoutHeaderCtrl' 
        } 
       } 
      }); 
    }]) 
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){ 
     var layoutHeaderCtrl = this; 
    }); 

angular.module('planttheidea.footer',[]) 
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){ 
     $stateProvider 
      .state('base.footer',{ 
       url:'', 
       views:{ 
        'footer@base':{ 
         templateUrl:'app/components/footer/footer.view.html', 
         controller:'FooterCtrl as layoutFooterCtrl' 
        } 
       } 
      }); 
    }]) 
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){ 
     var layoutFooterCtrl = this; 
    }); 

Вы можете видеть, что они почти идентичны. Модуль заголовка работает отлично (у него даже есть собственный вложенный ui-view для меню, который работает очень хорошо), однако код нижнего колонтитула не маршрутизирует ui-view. Что еще wackier, что если я скопировать и вставить код колонтитула в модуль заголовка (используя только base.header состояние), она работает по желанию:

angular.module('planttheidea.header',[ 
    'planttheidea.header.menu' 
]) 
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){ 
     $stateProvider 
      .state('base.header',{ 
       url:'', 
       views:{ 
        'header@base':{ 
         templateUrl:'app/components/header/header.view.html', 
         controller:'HeaderCtrl as layoutHeaderCtrl' 
        }, 
        'footer@base':{ 
         templateUrl:'app/components/footer/footer.view.html', 
         controller:'FooterCtrl as layoutFooterCtrl' 
        } 
       } 
      }); 
    }]) 
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){ 
     var layoutHeaderCtrl = this; 
    }) 
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){ 
     var layoutFooterCtrl = this; 
    }); 

Я подтверждено код загружается правильно (я сделал console.log() в контроллере нижнего колонтитула, чтобы убедиться, что он работает вообще), поэтому я думаю, что это должно быть разделение на два модуля. Нужно ли объявлять все представления макета в одном и том же состоянии или есть способ разбить их на отдельные модули, как я здесь сделал? Я должен полагать, что это возможно, потому что я сделал это с вложенным модулем меню, однако это было вложенным, тогда как нижний колонтитул параллелен, поэтому я беспокоюсь, что это может быть проблемой.

Любая помощь была бы очень признательна, но имейте в виду, что я участвую в процессе обучения AngularJS, поэтому, если рабочий код будет потрясающим (очевидно), объяснение того, почему было бы еще более удивительным.

Answer 1

Итак, есть несколько проблем, которые я исправлю в первую очередь и посмотрю, исправляет ли это вашу проблему.

Давайте предположим, что у вас есть DOM макет так:

<div ui-view> 
    <div ui-view="view1"></div> 
</div> 

Тогда ваши маршруты будут выглядеть следующим образом (это будет то же самое, даже если он разделен на несколько модулей, до тех пор, как вы впрыснуть другие модули в мастер - один, который вы)

.config(['$stateProvider','$urlRouterProvider',function($stateProvider){ 
     $stateProvider 
      .state('base',{ 
       url:'/', 
       templateUrl:'template.html', 
       controller:'Ctrl as ctrl' 
      }) 
      .state('base.view1',{ 
       url:'/view1', 
       views:{ 
        'view1':{ 
         templateUrl:'template.html', 
         controller:'Ctrl2 as ctrl2' 
        } 
       } 
      }); 
    }]) 

Некоторые вещи, чтобы заметить:

Поскольку мой base государство собирается непосредственно в UI-зрения ш без значения. У меня нет объекта вида с пустой строкой, я просто полностью исключаю его.

Также у моего base.view1 есть назначенный ему URL, так как это другое состояние.

Поскольку мой ui-view="view1" находится внутри Ui-зрения моего base государства не должны претендовать на вид, как показано ниже view1@base сценарий, при котором я должен был бы сделать это.

<div ui-view="main"></div> 


.config(['$stateProvider','$urlRouterProvider',function($stateProvider){ 
     $stateProvider 
      .state('base',{ 
       url:'/', 
       views : { 
        'main' : { 
         templateUrl:'template.html', 
         controller:'Ctrl as ctrl' 
        } 
       } 

      }) 
      .state('base.view1',{ 
       url:'/view1', 
       views : { 
        'main@base' : { 
         templateUrl:'template.html', 
         controller:'Ctrl as ctrl' 
        } 
       } 

      }); 
    }]) 

В этом примере я хочу, чтобы base.view1 «захват», так сказать, мнение, что base был в.

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

Надеюсь, что это имело смысл, дайте мне знать, если я смогу уточнить больше.