Вложенный вид Angular ui-маршрутизатора

Question

Я пытаюсь внедрить вложенное представление в мое обычное представление, используя ui-router.Я знаю, что это возможно, выполнив ng-include .Но я хочу решить эту проблему с помощью ui-router.

Мой html-код выглядит следующим образом:

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

Затем в моем сценарии я получил состояние:

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

Обновление - разве возможно что-то подобное?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

Кто-нибудь может найти опечатку или что-то в этом роде?Я читал документы.Я не уверен, что случилось.

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

Answer 1

Есть работающий плунжер, показывающий , как мы можем заставить его работать

На index.htm нам нужно иметь <div ui-view="" ></div>, это то место, куда мы вводили project.html.Затем мы корректируем определение состояния, чтобы внедрить также вложенный вид - используя ui-view абсолютное именование:

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

Абсолютное имя todos@project, введет todos.html в project.html.Проверьте плунжер

Посмотрите на:

• Просмотр имен - Относительный по сравнению сАбсолютные имена

Цитата:

...За кулисами каждому представлению присваивается абсолютное имя, которое соответствует схеме viewname@statename, где viewname - это имя, используемое в директиве view, а state name - абсолютное имя состояния, напримерконтакт.предмет.Вы также можете записать имена своих представлений в абсолютном синтаксисе...