How can i keep the old content of an ui-view and change another when i trigger state transition ui-router

Question

I started for weeks to use angularjs and i found it very awsome ! i used also ui-router for multiple and nested views, here is my problem: i have 2 states "state1" "state2" and 2 named ui-view "viewA" and "viewB" in my index.html. When i go to "state1" i render list.html in "viewA" and "edit.html" in "viewB", and when i go to "state2" i render "create.html" in "viewA", the problem is "viewB" becomes empty, i want the old content of "viewB" still displayed. So how can i keep the old content of an ui-view when i trigger state transition ? I hope that all this is very clear and thank you very much.

index.html

 <a ui-sref="state1">state1</a>
    <a ui-sref="state2">state2</a>

    <div ui-view ="viewA"> </div>
    <div ui-view ="viewB"> </div>

module.config

$stateProvider
         .state('state1', {

        views: {
            "viewA": { templateUrl: "views/nfl/list.html" },
            "viewB": { templateUrl: "views/leagues/edit.html" }
        }
    });
$stateProvider 
         .state('state2', {

        views: {
             "viewA": { templateUrl: "views/nfl/create.html" }

    }
});

Check out [this question][1] and see if that answers your problem. I think it might. [1]: http://stackoverflow.com/questions/17476694/with-angular-js-using-ui-router-how-to-only-reload-one-view?rq=1 — Jay, Dec 24 '13 at 15:40

score 0 · Answer 1 · answered Dec 24 '13 at 15:37

View is changed because it is a part of state.

I think you need to create abstract state #1 with viewB as edit, then create states: state #2 as state1.1 with viewA list.html and state #3 as state1.2 with viewA create.html - this way may help you.

(I didn't tested)

How can i keep the old content of an ui-view and change another when i trigger state transition ui-router

1 Answers1