Angular UI-Router: URL изменен, но просмотр не загружен

Я работаю над своим приложением UI-Router с вложенными представлениями. Я определил некоторые состояния следующим образом:

 $stateProvider

    .state('parent', {
      url: "/parent",
       views: {
         'area1': {templateUrl : 'parentView.html'},
         'area2' : ... // some other areas + template
       }
    })

    .state('parent.child1', {
      url: "/child1",
       views: {
          'area1' : {templateUrl : 'child1View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

    .state('parent.child2', {
      url: "/child2",
       views: {
          'area1' : {templateUrl : 'child2View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

При использовании приложения у меня есть основной вид, разделенный на некоторые области. В 1-й области я использую конкретный html файл. Если я нажму ссылку, приложение переходит в дочернее состояние, используя $state.go('myState'). В то время URL-адрес изменяется, но дочерний вид не загружается на страницу.

Я искал ответы на сайте, и я нашел этот вопрос у другого, который, похоже, сталкивается с той же проблемой: Angular Маршрутизатор - изменение Url, но просмотр не загружается

Знаете ли вы, что я пропустил?

Извините за плохой английский

Ответы

Ответ 1

Существует рабочий плункер

Скорее всего, index.html содержит эти цели:

<body>
    <div ui-view="area1"></div>
    <div ui-view="area2"></div>
    ...

Итак, если оба родителя и ребенка нацеливаются на них, нам нужно использовать абсолютное именование:

.state('parent.child1', {
  url: "/child1",
   views: {
      '[email protected]' : {template : '<h2>child 1 area 1 </h2>'},
      '[email protected]' : {template : '<h2>child 1 area 2</h2>'},
   }
})

.state('parent.child2', {
  url: "/child2",
   views: {
      '[email protected]' : {template : '<h2>child 2 area 1 </h2>'},
      '[email protected]' : {template : '<h2>child 2 area 2</h2>'},
   }
})

Давайте наблюдать doc:

Показать имена - Относительные и абсолютные имена

За кулисами каждому представлению присваивается абсолютное имя, которое следует схеме [email protected], где viewname - это имя, используемое в директиве представления, а имя состояния - это абсолютное имя состояния, например. contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.

Например, предыдущий пример также можно было записать как:

.state('report',{
    views: {
      '[email protected]': { },
      '[email protected]': { },
      '[email protected]': { }
    }
})

Итак, нашему ребёнку нужно использовать 1) просмотреть имя цели 2) разделитель @и 3) имя состояния (в нашей строке пуст, представляющей корень): '[email protected]'

Эти ссылки, похожие на $state.go(), будут работать сейчас:

  <a ui-sref="parent">
  <a ui-sref="parent.child1">
  <a ui-sref="parent.child2">

Отметьте здесь