UI的路由器 - 无需页面重新呈现/重装更改$状态 [英] UI-Router - Change $state without rerender/reload of the page

问题描述

我一直在寻找在这些网页（<一个href=\"http://stackoverflow.com/questions/23585065/angularjs-ui-router-change-url-without-reloading-state\">1, <一href=\"http://stackoverflow.com/questions/23121695/change-url-of-angular-ui-router-without-reloading-page\">2, 3 ）。基本上，我想改变我的 $状态，但我不想重新加载页面。

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.

我目前在页面 /日程表/ 2 /二千〇一十四分之四，我想进入编辑模式，当我点击一个按钮，并有URL成为 /日程表/ 2 /二千〇一十四分之四/编辑。

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.

我的修改的状态简直是 $ scope.isEdit = TRUE ，所以没有重新加载整个点页。但是，我想 $状态和/或网​​址来改变，因此，如果用户refreshses页面时，它开始于编辑模式。

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 也不控制器，并提前状态之间正常：

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

这是重要的<一个href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#nested-states--views\">concept这里要说的是，在 UI路由器，当应用程序是在一个特定的状态时，状态为激活 - 所有祖先状态是隐式主动为好。

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.

因此​​，在这种情况下，

So, in this case,

• 当从视图模式的应用进展到编辑模式，其母公司状态日程表（连同其 templateUrl ， 控制器，甚至解析）将仍然被保留。


• 因为祖先状态隐式激活，即使孩子的状态被刷新（或直接从书签加载），页面仍然会正确地呈现。

• 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的路由器 - 无需页面重新呈现/重装更改$状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！