Как просмотреть ng-hide и ng-show с помощью angular ui router?

Представьте, что приложение имеет страницу списка, например таблицу, показывающую список пользователей. В каждой строке таблицы называется "Правка", а в правой части браузера справа отображается панель с формой для редактирования этого содержимого пользователя. Когда форма сохраняется или закрывается, правая панель исчезает.

Как вы получаете Angular UI Router, чтобы автоматически отображать/скрывать правую панель при вводе и выходе из состояния редактирования? По умолчанию шаблон будет добавлен и удален, но сам контейнер по-прежнему будет присутствовать на экране.

В демонстрационном приложении для UI Router на html-макете было пустое пространство, выделенное для всех дочерних состояний, но в приложении, которое я создаю, мне бы очень хотелось скрыть панели, если они не используются и даже слайды все экраны в-и-out, когда состояния вводятся и выходят. Я предполагаю, что мне нужно будет использовать ng-show и ng-hide для этого. Как мне это сделать с помощью UI-маршрутизатора?

Спасибо!

Ответ 1

Лучшее решение, которое я придумал, было примерно так:

<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
    <div ui-view autoscroll="false"></div>
</div>

Ответ 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?

Обновление URL-адреса в Angular JS без просмотра рендеринга