UI-Router语言 - 改变$state而不渲染/重新加载页面

Question

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

我目前在页面/schedules/2/4/2014，我想进入编辑模式时，我点击一个按钮，并有URL成为/schedules/2/4/2014/edit。

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

我能做什么?

Answer 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)仍然会被保留。
• 由于祖先状态是隐式激活的，即使子状态被刷新(或直接从书签加载)，页面仍然会正确渲染。

Answer 2

REF: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statetransitiontoto-toparams--options

$state.transitionTo('yourState', params, {notify: false});

Answer 3

加上我的答案，因为我认为它与公认的答案足够不同，可能对其他人有用:

我有两个状态，begin和view，有一堆可选参数与view的URL同步，如:

$stateProvider
    .state('begin',
        {
            url: '/',
            template: '<app-element></app-element>'
        })
    .state('view',
        {
            url: '/View?param1&param2&...&paramN',
            template: '<app-element></app-element>'
            params: {
               param1: {
                   value: null,
                   squash: true
               },
               ...
            }
        });

<app-element>的链接函数将在任何时候运行，我试图使用$state.go同步参数。使用{notify: false, reload: false}不适合我。每次链接函数仍然运行。我在0.2上，所以dynamic也不是一个可用的参数选项。我听从了@b0nyb0y的建议，把它变成了父母和孩子的关系，这是有效的:

$stateProvider
    .state('app',
        {
            url: '/',
            template: '<app-element></app-element>'
        })
    .state('app.view',
        {
            url: 'View?param1&param2&...&paramN',
            params: {
               param1: {
                   value: null,
                   squash: true
               },
               ...
            }
        });