angularjs - UI-Router - 更改 $state 而不重新渲染/重新加载页面

Question

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

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

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

我能做什么？

Answer 1

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

// 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"
    });

重要的concept在 ui-router 中，当应用程序处于特定状态时(当状态为“事件”时)，其所有祖先状态也隐式处于事件状态。

所以，在这种情况下，

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