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 Router - URL-адрес изменяется, но представление не загружается

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

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

Источник

1 ответ

Решение

Есть рабочий поршень

Most likely the index.html contains these targets:

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

So, if both, parent and child do target these, we need to use absolute naming:

.state('parent.child1', {
  url: "/child1",
   views: {
      'area1@' : {template : '<h2>child 1 area 1 </h2>'},
      'area2@' : {template : '<h2>child 1 area 2</h2>'},
   }
})

.state('parent.child2', {
  url: "/child2",
   views: {
      'area1@' : {template : '<h2>child 2 area 1 </h2>'},
      'area2@' : {template : '<h2>child 2 area 2</h2>'},
   }
})

Let's observe doc:

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

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

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

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

So, our child needs to use 1) view target Name 2) delimiter @ and 3) the state name (in our string empty representing the root): 'area1@'

These links, similar to $state.go() will work now:

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

Проверьте это здесь

Источник
Другие вопросы по тегам