Как установить вложенное представление внутри нескольких представлений

Question

У меня есть два именованных представления и безымянное представление как следующие:

//department.html
<div class="col-md-2">
        <div ui-view="sideBar"></div>
 </div>

 <div class="col-md-10">

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

        <div ui-view></div>

 </div>

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

.state('Support', {
    url: '/support',
    views: {
       '': { templateUrl: 'app/components/department/department.html'  },

       'sideBar@Support': {
                           templateUrl: 'app/shared/sideBar/sideBar.html',
                           controller: 'SideBarController'
                          },

        'content@Support':{
                           templateUrl: 'app/components/department/support/partial-support.html',
                           controller: 'SupportController'
                          },

      }        
  })


.state('Support.view', {
  url: '/view',
  template: '<b> Hi there nested!!</b>'
});

Что мне нужно:

• localhost/support: это родительский URL, в котором вставляются два именованных представления (sideBar и content), что работает для меня.
• localhost/support/view: в этом маршрутизаторе я хочу дочерний вид, который заменит content посмотреть ИЛИ заменить оба нескольких просмотров.

Проблема в том, что я не могу заставить работать вложенное представление, я делаю что-то не так?

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

Answer 1

Ваш сценарий работает, когда НЕ включен html5Mode. Есть рабочий поршень.

Я просто использовал эти ссылки:

<a ui-sref="Support">
<a ui-sref="Support.view">

А состояние как есть - работает.

В случае, если у вас включен html5Mode, вы также должны настроить свой сервер. Но, как показывает этот обновленный плункер, он снова работает, даже с включенным html5Mode

$locationProvider.html5Mode({enabled: true});

Проверить версию

• без html5Mode
• с включенным html5Mode