UI-Router дочерний вид компонента angularjs не отображается

У меня есть компонент angularjs (почти пустая разметка), выступающий в качестве оболочки / родителя для его дочерних представлений (разметки с различными столбцами / форматами). Я могу видеть компонент, но никакие дочерние представления не загружены.

Код конфигурации UI-роутера:

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {


$urlRouterProvider.otherwise('/');

$stateProvider
  .state('parent', {
    url: '',
    views: {
      'parentComponent': {
        component: 'parentComponent'
      }
    }
  })
  .state('parent.child', {
    url: '/child',
    templateUrl: 'child.html'
  });

index.html:

<body ng-app="app" >
 <div ng-controller='RoutingCtrl'>
   <parent-component></parent-component>
 </div>
</body>

Родитель, который является компонентом:

<!DOCTYPE html>
<div>
    <br />
    <br />
    <div>I am the parent, a angularjs component.</div>
    <div>There sould be the nested/child view right below:</div>
    <div ui-view></div>
</div>

ребенок:

<div>Hi! I am the child!</div>

Мой контроллер сообщает ui-router перейти к дочернему виду:

$state.go('parent.child');

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

Я использую angularjs 1.5.8 и ui-router версию 0.4.2

Плункер: http://plnkr.co/edit/tBhVTjttMagaJzHQNvro?p=preview

Источник

1 ответ

Решение

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

  • Пример с отношениями родитель-ребенок - в этом примере используется ui-view на протяжении всего приложения. parent-component загружен со своим собственным состоянием, и это не abstract, Этот подход хорош, если вы хотите загружать разные шаблоны для разных состояний в одном месте.
  • Пример с гибридным подходом. Этот пример следует вашей текущей структуре приложения с parent-component загружен в index.html и состояние загружено в ваш parent-component, Вы можете видеть, что вам действительно не нужен parent заявите здесь, как вы положили parent-component прямо в index.html файл. государственный child загружен внутри вашего parent-component и ему не нужно родительское состояние.
Источник
Другие вопросы по тегам