it-roy-ru.com

Как ng-скрыть и ng-показать представления, используя угловой маршрутизатор пользовательского интерфейса?

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

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

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

Спасибо!

35
egervari

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

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

UI-маршрутизатор Angular предлагает чистый метод переключения вложенных представлений.

Сначала введите $ state в ваш гипотетический контроллер «страницы списка». Затем выставьте его в локальную область видимости $:

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

Введенная нами переменная $ state имеет метод Nice «include». $ state.include () принимает строку в качестве аргумента и проверяет эту строку на соответствие имени текущего состояния. Он возвращает true, если имя состояния соответствует строке, и false, если нет. Это делает его очень удобным для использования с ng-show или ng-hide.

Вместо этого используйте $ State.include () ui-router с тем же шаблоном, что и 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'
        }
    }
});
42
Tyler Buchea

В любом случае, вы можете решить эту проблему, просто убедитесь, что в разделе .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 и проверив код примера приложения, только после того, как ударился головой о клавиатуру, потому что это не сработало.

2
JSantaCL

Ваш 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 без повторного рендеринга вида

0
roland