2016-06-16 3 views
1

У меня возникли проблемы с разработкой структуры кода маршрутизации с помощью маршрутизатора пользовательского интерфейса.Состояние ребенка не загружается внутри родителя

В моем индексном файле, звоню в шаблоне меню и 2 боковой панели шаблоны следующим образом: index.html

<!-- head code above here --> 
<body ng-app="ICP_App" ng-cloak> 
    <div layout-fill layout="row" ng-controller="AppController as AppCtrl"> 
     <div ui-view="left-nav"></div> 
     <div ui-view="right-nav"></div> 
     <div ui-view="toolbar"></div> 

     <!-- this is where I am expecting/wanting my dashboard template to load (and others when at the correct url--> 
     <div class="page-content view" ui-view></div> 

     <!-- footer code under here --> 

Мои маршруты:

$urlRouterProvider.otherwise('dashboard'); 

$stateProvider 
    .state('root', { 
     abstract: true, 
     templateUrl: '../partials/icp_index.html', 
     controller: 'AppController as AppCtrl', 
     url: '', 
     views: { 
      'left-nav': { 
       templateUrl: '../partials/left-nav.html' 
      }, 
      'right-nav': { 
       templateUrl: '../partials/right-nav.html' 
      }, 
      'toolbar': { 
       templateUrl: '../partials/toolbar.html' 
      } 
     } 
    }) 
    .state('root.dashboard', { 
     url: '/dashboard', 
     templateUrl: '../partials/agency-dashboard.html', 
     controller: 'AppController as AppCtrl' 
    }) 

Однако, меню и боковых панелей, но основная область содержимого остается пустой. Интересно, связано ли это с «другим»?

Мой индексный файл должен содержать меню и боковые панели, а затем содержимое для этого состояния, которое должно быть загружено, где я указал выше, - в этом случае шаблон панели мониторинга. «.otherwise» показывает, что панель инструментов (в файле индекса) отображается неправильно или неполна.

Заранее спасибо.

ответ

1

Вы должны назвать, что UI-вид, и от состояния вашего ребенка, вам нужно указать и/или переопределить нужный вид, так что это будет что-то вроде:

<div class="page-content view" ui-view="main-content"></div> 

и определения состояния:

.state('root.dashboard', { 
     url: '/dashboard', 
     views: { 
      '[email protected]': { 
       templateUrl: '../partials/agency-dashboard.html', 
       controller: 'AppController as AppCtrl' 
      } 
     } 
    }) 

Кроме того, вы должны иметь два шаблона, один определяет только корень UI-вид (index.html), а другой ваш icp_index, который содержит названные виды. Это plunkr показывает структуру:

plnkr.co/edit/zjngTr0JU6cUGBtMsfN0

+0

Благодарность @frankies, но страница по-прежнему оказывает точно такое же - меню и боковые панели, без содержания в центре – DJC

+0

я думаю, что я вижу, что ваша проблема. Я думаю, у вас есть два шаблона: ** index.html ** и ** ../partials/icp_index.html **? Они должны быть разделены, один определяет только корневой ui-view, а другой - ваш icp_index, который содержит именованные представления. Я поставил plunkr, который показывает, что эта проблема решена. http://plnkr.co/edit/zjngTr0JU6cUGBtMsfN0 – frankies

+0

Я внедрил изменения в вашем plunkr, но страница теперь пустая, и я получаю консольную ошибку (в любом случае, есть одна кнопка с кнопкой), которая повторяется бесконечно, так же как и перезагрузка меню постоянно. Я использую Laravel здесь и настроил маршрут, чтобы указать на мое представление index.html, но UI-маршрутизатор также ищет индексный файл, не так ли? – DJC

Смежные вопросы