CODEWITHSUNDEEP
angularjsangular-ui-router
kisalaya
kisalaya

Reputation: 111

How to avoid repainting of template when i come back to a route in Angularjs Ui-Router

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'.

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

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.

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.)

Upvotes: 4

Views: 522

Answers (2)

Gene Parcellano
Gene Parcellano

Reputation: 6044

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

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>

Upvotes: 0

Chandermani
Chandermani

Reputation: 42669

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.

  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.

Upvotes: 1

Related Questions