angular-ui-router: невозможно загрузить страницу состояния ребенка в поле зрения

0

Я использую угловой UI-Router. Я хочу показать страницу поиска пользователя в родительском состоянии и пользовательской информации в дочернем состоянии.

app.js

.state('users', {
        url: "/users",
        templateUrl: "app/views/user/userSearchPage.html",
        controller: "userCtrl"
    })
      .state('users.edit', {
          url: "/:username/edit",
          templateUrl: "app/views/user/tenantUser.html",
          controller: "userCtrl"
      })

Когда я пытаюсь загрузить представление дочернего состояния, он по-прежнему показывает родительское состояние.

Как я могу решить эту проблему?

Теги:
angular-ui-router
state

1 ответ

0
Лучший ответ

Когда вы определяете дочернее состояние, он предположил, что родительское состояние не выходит при вводе дочернего элемента. Таким образом, причина, по которой вы ничего не видите, в том, что в шаблоне app/views/user/userSearchPage.html отсутствует app/views/user/userSearchPage.html <ui-view></ui-view>. Поскольку edit определяется как вложенное состояние, шаблоны также должны быть вложены. Единственный способ вложить в ui-router - это определить ui-view, чтобы дать местозаполнитель для дочернего шаблона.

Остерегайтесь двойных экземпляров контроллеров. Если в шаблоне содержится ng-controller="userCtrl" будут созданы два экземпляра, один по шаблону другой маршрутизатором

Если вы хотите, чтобы шаблоны выставляли друг друга, вы не должны определять состояния вложенные. Они являются родственными государствами по своей природе

.state('users', {
    url: "/users",
    templateUrl: "app/views/user/userSearchPage.html",
    controller: "userCtrl"
})    
.state('edit', {
    url: "/edit/:username",
    templateUrl: "app/views/user/tenantUser.html",
    controller: "userCtrl"
})

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

  1. Простым способом было бы добавить параметры поиска в состояние и его URL-адрес и иметь возможность вернуться к нему. В этом случае угловая перезагрузит страницу поиска снова. Это можно сделать, если вы следуете шаблону REST в своей архитектуре, то есть те же параметры запроса всегда определяют одни и те же данные.

  2. Более сложными и сохраняющими данные поиска при редактировании элемента будут использование липких состояний из ui-router-extras. Вам нужно будет определить именованный ui-view для поиска и для редактирования. users и edit должны стать родственными (как я предложил выше) и получить sticky: true и шаблоны должны быть определены для названных ui-views.

    .state('users', {url: "/users", sticky: true, views: {search: {templateUrl: "app/views/user/userSearchPage.html", controller: "userCtrl"}}})
    .state('edit', {url: "/edit/: username", sticky: true, views: {search: {templateUrl: "app/views/user/tenantUser.html", контроллер: "userCtrl"}}} )

В шаблоне контейнера вы определяете два ui-представления вместо одного

<ui-view name="search"></ui-view>
<ui-view name="edit"></ui-view>
  1. Возможно, но грубо. Мне не нравится этот подход, потому что он не будет хорошо масштабироваться.
    Государства - это дети, которые были изначально. Шаблон поиска должен быть изменен
<div ng-show="$state.current.name.indexOf('.edit') >= 0">
  all your existing markup for search here 
</div>

 child template will be nested here when appropriate state is set
 but as the above part will hide it, will imitate replacing template
<ui-view></ui-view>
  • 0
    да, но я хочу показывать только шаблон app/views/user/tenantUser.html когда я нахожусь в дочернем состоянии. Как я могу это сделать?
  • 0
    Почему бы вам не изменить состояние ребенка на состояние родного брата?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню