UI-Router - 无需重新渲染/重新加载页面即可更改 $state [英] UI-Router - Change $state without rerender/reload of the page

问题描述

我一直在查看这些页面(1、2、3).我基本上想更改我的 $state，但我不想重新加载页面.

I've been looking at these pages (1, 2, 3). I basically want to change my $state, but I don't want the page to reload.

我当前在页面 /schedules/2/4/2014 中，我想在单击按钮时进入编辑模式并使 URL 变为 /schedules/2/4/2014/编辑.

I am currently in the page /schedules/2/4/2014, and I want to go into edit mode when I click a button and have the URL become /schedules/2/4/2014/edit.

我的edit 状态只是$scope.isEdit = true，所以没有必要重新加载整个页面.但是，我确实希望 $state 和/或 url 改变，以便如果用户刷新页面，它会以编辑模式启动.

My edit state is simply $scope.isEdit = true, so there is no point of reloading the whole page. However, I do want the $state and/or url to change so that if the user refreshses the page, it starts in the edit mode.

我能做什么?

推荐答案

对于这个问题，你可以创建一个既没有 templateUrl 也没有 controller 的子状态，并且在状态之间正常前进:

For this problem, you can just create a child state that has neither templateUrl nor controller, and advance between states normally:

// 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 中，当应用程序处于特定状态时——当一个状态是活动"时——它的所有祖先状态也隐式地处于活动状态.

An important concept here is that, in ui-router, when the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well.

所以，在这种情况下，

• 当您的应用程序从查看模式进入编辑模式时，它的父状态 schedules(连同它的 templateUrl、controller 甚至 >resolve) 仍将保留.
• 由于祖先状态是隐式激活的，即使子状态正在刷新(或直接从书签加载)，页面仍会正确呈现.

• when your application advances from view mode to edit mode, its parent state schedules (along with its templateUrl, controller and even resolve) will still be retained.
• since ancestor states are implicitly activated, even if the child state is being refreshed (or loaded directly from a bookmark), the page will still render correctly.

这篇关于UI-Router - 无需重新渲染/重新加载页面即可更改 $state的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！