UI-Router - изменить $state без перезагрузки/перезагрузки страницы

Я просматривал эти страницы (1, 2, 3). Я в основном хочу изменить свой $state, но я не хочу, чтобы страница перезагружалась.

Сейчас я нахожусь на странице /schedules/2/4/2014, и я хочу перейти в режим редактирования, когда я нажимаю кнопку, и URL-адрес становится /schedules/2/4/2014/edit.

Мое edit состояние просто $scope.isEdit = true, поэтому нет смысла перезагружать всю страницу. Тем не менее, я хочу, чтобы $state и/или url изменились, чтобы, если пользователь обновляет страницу, он запускается в режиме редактирования.

Что я могу сделать?

Ответы

Ответ 1

Для этой проблемы вы можете просто создать дочернее состояние, которое не имеет ни templateUrl, ни controller, и обычно перемещаться между states:

// UPDATED
$stateProvider
    .state('schedules', {
        url: "/schedules/:day/:month/:year",
        templateUrl: 'schedules.html',
        abstract: true, // make this abstract
        controller: function($scope, $state, $stateParams) {
            $scope.schedDate = moment($stateParams.year + '-' + 
                                      $stateParams.month + '-' + 
                                      $stateParams.day);
            $scope.isEdit = false;

            $scope.gotoEdit = function() {
                $scope.isEdit = true;
                $state.go('schedules.edit');
            };

            $scope.gotoView = function() {
                $scope.isEdit = false;
                $state.go('schedules.view');
            };
        },
        resolve: {...}
    })
    .state('schedules.view', { // added view mode
        url: "/view"
    })
    .state('schedules.edit', { // both children share controller above
        url: "/edit"
    });

Важная концепция здесь заключается в том, что в ui-router, когда приложение находится в определенном состоянии - когда состояние "активно" - все его предка состояния также неявно активны.

Итак, в этом случае

  • когда ваше приложение переходит из режима просмотра в режим редактирования, его родительское состояние schedules (вместе с его templateUrl, controller и даже resolve) будет сохранено.
  • поскольку состояния предков неявно активируются, даже если дочернее состояние обновляется (или загружается непосредственно из закладки), страница будет отображаться правильно.