当我回到Angularjs Ui-Router中的路由时,如何避免重新绘制模板

时间:2021-09-08 19:39:52

In the current version, when i go from, say a state 'a' to state 'b' and then come back to 'a', the template for 'a' is repainted, instead of restoring the template. Result is that the user-data in template 'a' is lost, as soon as i navigate away from 'a'.

在当前版本中,当我从一个状态'a'表示状态'b'然后再回到'a'时,'a'的模板被重新绘制,而不是恢复模板。结果是,一旦我离开'a',模板'a'中的用户数据就会丢失。

(the problem is there for angular's inbuilt routing service too).

(问题在于angular的内置路由服务)。

Now, this would be the sole reason i wouldn't like to have ui-router (everything else is fantastic), because this behavior doesn't fit one of our most important use-cases. Also to me personally, this doesn't seem like the most logical of the behaviors.

现在,这将是我不想拥有ui-router(其他一切都很棒)的唯一原因,因为这种行为不适合我们最重要的用例之一。对我个人而言,这似乎不是最合乎逻辑的行为。

I wanted to know if there's a way to achieve this using what is built-in.

我想知道是否有办法使用内置的方法实现这一目标。

(I was able to get this behavior after a few hack-arounds in the source code.)

(在源代码中有一些hack-arounds之后,我能够得到这种行为。)

2 个解决方案

#1


1  

If you app is tracking state across views, there are two ways that i know you persist data across view changes.

如果您的应用是跨视图跟踪状态,我知道有两种方法可以跨视图更改保留数据。

  1. One is to define the state of view on the parent scope of ng-view or ui-view. This scope can either be $rootScope or a scope that is not change when navigation happens. For example if you define something like $rootScope.user={};. Anywhere you inject the $rootScope you would get this user object which you can update.

    一种是定义ng-view或ui-view的父范围的视图状态。此范围可以是$ rootScope,也可以是导航发生时不会更改的范围。例如,如果您定义类似$ rootScope.user = {};的内容。注入$ rootScope的任何地方都可以获得可以更新的用户对象。

  2. Second is to use a service to track the state of the model that is being worked. For example if you are working on creating user. You can create a service such as UserCreateWuzard with method\property such as userToCreate. Your controllers would depend upon this service to get and update the active user across views. Since services are singleton by nature you would not loose any data across view.

    其次是使用服务来跟踪正在工作的模型的状态。例如,如果您正在创建用户。您可以使用方法\属性(如userToCreate)创建UserCreateWuzard等服务。您的控制器将依赖此服务来跨视图获取和更新活动用户。由于服务本质上是单一的,因此您不会在视图中丢失任何数据。

#2


0  

I had a similar need of preserving the template. After a little bit of searching I finally ran into this add-on: UI Router Extras: Sticky State

我有类似的需要保留模板。经过一些搜索后,我终于遇到了这个附加组件:UI Router Extras:Sticky State

Once you've added the library, you will need to update your routes:

添加库后,您需要更新路线:

$stateProvider.state('billing', {
    sticky: true,
    views: {
        'billing' : {
            templateUrl: 'billing.html',
            controller: 'BillingController'
        }
    }
});

You'll also need to add a container for the view/template that you need to preserve

您还需要为需要保留的视图/模板添加容器

<main ui-view></main>
<div ui-view="billing" ng-show="$state.current.name==='billing'"></div>

#1


1  

If you app is tracking state across views, there are two ways that i know you persist data across view changes.

如果您的应用是跨视图跟踪状态,我知道有两种方法可以跨视图更改保留数据。

  1. One is to define the state of view on the parent scope of ng-view or ui-view. This scope can either be $rootScope or a scope that is not change when navigation happens. For example if you define something like $rootScope.user={};. Anywhere you inject the $rootScope you would get this user object which you can update.

    一种是定义ng-view或ui-view的父范围的视图状态。此范围可以是$ rootScope,也可以是导航发生时不会更改的范围。例如,如果您定义类似$ rootScope.user = {};的内容。注入$ rootScope的任何地方都可以获得可以更新的用户对象。

  2. Second is to use a service to track the state of the model that is being worked. For example if you are working on creating user. You can create a service such as UserCreateWuzard with method\property such as userToCreate. Your controllers would depend upon this service to get and update the active user across views. Since services are singleton by nature you would not loose any data across view.

    其次是使用服务来跟踪正在工作的模型的状态。例如,如果您正在创建用户。您可以使用方法\属性(如userToCreate)创建UserCreateWuzard等服务。您的控制器将依赖此服务来跨视图获取和更新活动用户。由于服务本质上是单一的,因此您不会在视图中丢失任何数据。

#2


0  

I had a similar need of preserving the template. After a little bit of searching I finally ran into this add-on: UI Router Extras: Sticky State

我有类似的需要保留模板。经过一些搜索后,我终于遇到了这个附加组件:UI Router Extras:Sticky State

Once you've added the library, you will need to update your routes:

添加库后,您需要更新路线:

$stateProvider.state('billing', {
    sticky: true,
    views: {
        'billing' : {
            templateUrl: 'billing.html',
            controller: 'BillingController'
        }
    }
});

You'll also need to add a container for the view/template that you need to preserve

您还需要为需要保留的视图/模板添加容器

<main ui-view></main>
<div ui-view="billing" ng-show="$state.current.name==='billing'"></div>