Ответ 1
Лучшее решение, которое я придумал, было примерно так:
<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
<div ui-view autoscroll="false"></div>
</div>
Как просмотреть ng-hide и ng-show с помощью angular ui router?
Представьте, что приложение имеет страницу списка, например таблицу, показывающую список пользователей. В каждой строке таблицы называется "Правка", а в правой части браузера справа отображается панель с формой для редактирования этого содержимого пользователя. Когда форма сохраняется или закрывается, правая панель исчезает.
Как вы получаете Angular UI Router, чтобы автоматически отображать/скрывать правую панель при вводе и выходе из состояния редактирования? По умолчанию шаблон будет добавлен и удален, но сам контейнер по-прежнему будет присутствовать на экране.
В демонстрационном приложении для UI Router на html-макете было пустое пространство, выделенное для всех дочерних состояний, но в приложении, которое я создаю, мне бы очень хотелось скрыть панели, если они не используются и даже слайды все экраны в-и-out, когда состояния вводятся и выходят. Я предполагаю, что мне нужно будет использовать ng-show и ng-hide для этого. Как мне это сделать с помощью UI-маршрутизатора?
Спасибо!
Ответы
Ответ 2
Angular ui-router предлагает чистый метод для переключения вложенных представлений.
Сначала введите $state в свой гипотетический "список страниц". Затем выведите его в локальную область $scope:
.controller('ListPageCtrl', function($scope, $state) {
$scope.$state = $state;
})
Переменная $state, которую мы ввели, имеет хороший метод "включает". $state.includes() принимает строку в качестве аргумента и проверяет эту строку в отношении текущего имени состояния. Он возвращает true, если имя состояния соответствует строке и false, если нет. Это очень удобно использовать с ng-show или ng-hide.
Используйте ui-router $state.includes() вместо этого с тем же шаблоном, что и egervari:
<div id="rightView" ng-show="$state.includes('list.edit')">
<div ui-view="edit" autoscroll="false"></div>
</div>
Помимо переключения на метод include, я также добавил уникальное имя в атрибут ui-view. Вы захотите назвать свои взгляды, когда у вас будет больше, чем два. Это упростит отслеживание ваших шаблонов и логики.
Чтобы добавить имена к вашим представлениям. Изменить 1 на 2:
// 1
.state('list.edit', {
url: 'list/edit/:id',
templateUrl: 'template/edit.html',
controller: 'ListPageEditCtrl'
})
// 2
.state('list.edit', {
url: 'list/edit/:id',
views: {
'edit': { // this is the unique name you can reference later
templateUrl: 'template/edit.html',
controller: 'ListPageEditCtrl'
}
}
});
Ответ 3
В любом случае вы решите эту проблему, просто убедитесь, что в разделе .run приложения angular вы объявляете что-то вроде этого:
angular.module('yourApp', ['ui.router'])
.run(
['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
В противном случае из внутренних шаблонов будет доступно не $state, а $stateParams. Выяснил это, прочитав документы ui-router и проверив пример кода приложения, сразу после того, как я ударил головой о клавиатуру, потому что это не сработало.
Ответ 4
Ваш url должен отражать режим состояния с помощью запроса: /stuff/1?edit или /stuff/1, который обозначает /stuff/1?view
Вы можете использовать reloadOnSearch=false, чтобы инструктировать AngularJS не перезагружать представление:
http://docs.angularjs.org/api/ngRoute.$routeProvider
Внутри controller проверьте состояние (view или edit) с помощью $routeParams. Поймайте событие редактирования кликов, передайте свою модель на панель и соответствующим образом переключите ее видимость.
Смотрите эти интересные ссылки:
Можете ли вы изменить путь без перезагрузки контроллера в AngularJS?