Question

I am a newbie at angular ui-router, but have been using it for simple layouts up until now.

I have this plunker : http://plnkr.co/edit/q71yKZ2m8iZrZo2FwbZd?p=preview

What I am trying to do is twofold :

to be able to make some changes in part a, click on part b , make some changes and click back between the 2 parts, but retain the modified data
to make changes in a, go to b, then press the back button and get back to a without loosing the changes

my states are defined like this

$stateProvider
        .state('top', {
            url: '/top',
            name: 'top',
            sticky: true,
            templateUrl: 'top.html'
        });

$stateProvider
        .state('top.parta', {
            url: '/parta',
            name: 'parta',
            sticky: true,
            templateUrl: 'parta.html',
            controller: 'parta'
        });

$stateProvider
        .state('top.partb', {
            url: '/partb',
            name: 'partb',
            templateUrl: 'partb.html',
            sticky: true,
            controller: 'partb'
        });

whilst I can get the views working, I can't seem to be able to keep the state in place

I thought that by having "top.parta" and "top.partb" I would be creating a nested view, but am somewhat confused about the need to have the views object within the top level state

When I tried using views, all I got was a blank screen. I hope that this is a simple enough fix - all I need is that switch to turn the bulb on ;)

update #1 looks like I need to use named views ("The sticky state view must target its own unique named ui-view."). I'll look further into this

angular ui router and sticky states

0 个答案: