Я использую угловой 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"
})
Когда я пытаюсь загрузить представление дочернего состояния, он по-прежнему показывает родительское состояние.
Как я могу решить эту проблему?
Когда вы определяете дочернее состояние, он предположил, что родительское состояние не выходит при вводе дочернего элемента. Таким образом, причина, по которой вы ничего не видите, в том, что в шаблоне 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"
})
С обновленной информацией из комментариев я могу предложить три способа решения сценария: поиск, поиск результатов, редактирование одного элемента (полноэкранный шаблон), возврат к поиску и просмотр данных.
Простым способом было бы добавить параметры поиска в состояние и его URL-адрес и иметь возможность вернуться к нему. В этом случае угловая перезагрузит страницу поиска снова. Это можно сделать, если вы следуете шаблону REST в своей архитектуре, то есть те же параметры запроса всегда определяют одни и те же данные.
Более сложными и сохраняющими данные поиска при редактировании элемента будут использование липких состояний из 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>
<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>
app/views/user/tenantUser.html
когда я нахожусь в дочернем состоянии. Как я могу это сделать?