一尘不染

UI-Router-更改$ state无需重新呈现/重新加载页面

angularjs

我一直在看这些页面(1,2,3)。我基本上想更改自己的$state,但是我不想重新加载页面。

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

我的edit状态很简单$scope.isEdit =true,所以没有必要重新加载整个页面。但是,我确实希望$stateand和or
url进行更改,以便如果用户刷新页面,则页面将以编辑模式启动。

我能做什么?


阅读 421

收藏
2020-07-04

共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(以及templateUrlcontroller甚至resolve)将仍然保留。
  • 由于祖先状态被隐式激活,因此即使刷新(或直接从书签中加载)子状态,页面仍将正确呈现。
2020-07-04