Angularjs && ui-router — как реализовать переход между parentPage и childPage без перезагрузки?

Добрый день! У меня возникла проблема с реализацией данного вопроса. Имеется 3 страницы, их роутинг:

1) страница home - стартовая страница
.state('home', {
  url: '/',
  views: {
    page: {
      templateUrl: function() {
        return startPath + '/home/page.html';
      },
      controller: 'homePage'
    }
  }
})


2) страница с профилями:
.state('profiles', {
  url: 'profiles?city',
  reloadOnSearch: false,
  params: {
    city: null
  },
  views: {
    page: {
      controller: 'profilesPage',
      templateUrl: function () {
        return startPath + '/profiles/page.html';
      }
    }
  }
})


3) страница деталей профиля
.state('profile', {
  url: '/profiles/:profileId',
  reloadOnSearch: false,
  //parent: 'profiles',
  views: {
    page: {
      controller: 'profilePage',
      templateUrl: function() {
        return startPath + '/profile/page.html';
      }
    }
  }
})


Включена поддержка html5
$locationProvider.html5Mode(true);

В во вьюхе вставляю <div ui-view="page"></div>

При загрузке главной все отображается, переход с главной на страницу списка профилей все проходит без перезагрузки и так же все отображается. Но вот переход со страницы списка на страницу деталей профиля происходит с перезагрузкой страницы. Как сделать так, чтобы этого избежать?
Путь по урлам хотел видеть таким: / -> /profiles?city -> profiles/profileId

P.S. Я уже пробовал много вариантов($state.go, $state.transitionTo, abstract: true, etc.), но чую, что не понимаю чего-то фунтаментального, или вовсе косяк).

P.P.S. При переходе со страницы списка на страницу деталей профиля, меняется весь внешний вид, даже хедер и футер. И признаться, это тоже немного рвет мой шаблон в понимании проблемы)

UPDATE:
Я накидал plunker, чтобы показать как именно я хотел сделать.

plnkr.co/edit/ZGN1AHxoP2kluLP2mwJL?p=preview

Суть в том, что в списке кликая на Product 1 (as a child view), мы можем достучаться до parent.products, но тут не происходит полная замена контента. Во втором же случае(- Product 1 (as a Root view)), у нас происходит полная смена контента, но при это я не могу достучаться до родительского products. И там так же происходит перезагрузка. Собственно я и хочу понять, как можно второй вариант сделать с полной сменой контента, но и без перезагрузки(просто не очень хочется для данной страницы опять все грузить, или пихать в sessionStorage, хотя насчет последнего еще подумаю конечно)
Заранее спасибо!
  • Вопрос задан
  • 5754 просмотра
Решения вопроса 2
mrRontgen
@mrRontgen
Scala lover.
Вот тут пример plnkr.co/edit/u18KQc?p=preview
Ответ написан
Комментировать
Не совсем понятно. У Вас получается одна вьюха
<div ui-view="page"></div>
На все роуты. Т.е. при переходе на любую из страниц эта вьюха полностью обновляется
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы