UI-Router - 在不重新渲染/刷新页面的情况下更改$state

13 浏览
0 Comments

UI-Router - 在不重新渲染/刷新页面的情况下更改$state

我一直在查看这些页面（1，2，3）。我基本上想要改变我的$state，但我不想重新加载页面。\n我当前在页面/schedules/2/4/2014，当我点击一个按钮时，我想进入编辑模式，并且将URL变为/schedules/2/4/2014/edit。\n我的edit状态只是$scope.isEdit = true，所以重新加载整个页面没有意义。然而，我希望$state和/或url改变，以便如果用户刷新页面，它会以编辑模式开始。\n我该怎么办？

0

3 答案

0 Comments

问题的出现原因是使用$state.go方法同步参数时，链接函数仍然会运行，即使使用了{notify: false, reload: false}参数。而且在版本0.2中，dynamic参数也不可用。为了解决这个问题，可以将两个状态变成父子关系，如下所示：

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

这样，每次使用$state.go方法同步参数时，链接函数就不会被运行了。

0
0 Comments

在使用UI-Router时，有时我们希望在不重新渲染或刷新页面的情况下更改$state。然而，默认情况下，当我们使用$state.transitionTo()方法时，页面会重新渲染。

要解决这个问题，我们可以使用$state.transitionTo()方法的第三个参数options。在options中，我们可以设置notify为false，这样就可以实现在不重新渲染页面的情况下更改$state。

下面是一个示例代码：

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

通过将notify设置为false，我们可以在不重新渲染页面的情况下改变$state。这对于一些特定的应用场景非常有用，比如在更改URL参数时，但不希望重新加载整个页面。

0
0 Comments

在这个问题中，可以创建一个没有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）将仍然保留。
  • 由于祖先状态被隐式激活，即使子状态正在刷新（或直接从书签加载），页面仍然会正确渲染。

这会起作用，但是我已经有一个抽象状态schedule，然后有两个子状态：schedule.view和schedule.edit。我需要这个层次结构。你所建议的意味着我需要有schedule，schedule.view和schedule.view.edit，但由于某些原因，我不能这样做。

那几乎与上面的代码相同：只需将上面的schedules更改为abstract，保留controller（以便可以在.view和.edit状态上使用），添加一个类似于上面的edit的view状态定义，然后在gotoView()中导航到schedules.view。可能会有什么问题？

如果用户直接进入/edit并将$scope.isEdit设置为true，该怎么办？

对此，只需检查URL /状态（即$state.is('YOUR_STATE)），如果状态处于edit模式，则设置scope.isEdit = true。在这里阅读更多信息：angular-ui.github.io/ui-router/site/#/api/…

0