Persist state when changing to another state

问题:

I want to create dynamic navigation, that i can change navigation item by state, the problem is when i change the content, the navigation is cleared out, i already tried this solution but it seems not working on my cases

Here is my plunker

And here is my state configuration

var app = angular.module('knax', ['ui.router', 'ui.bootstrap']);

app.config(
  function($stateProvider) {

    $stateProvider.state('app', {
      views: {
        '@': {
          templateUrl: 'layout.html'
        },
        'navigation-layout@app': {
          templateUrl: 'navigation-layout.html'
        },
        'content-layout@app': {
          templateUrl: 'content-layout.html'
        }

      }
    })
    .state('app.navigation-user', {
      views: {
        'navigation': {
          templateUrl: 'navigation-user.html'
        }
      }
    })
    .state('app.navigation-guest', {
      views: {
        'navigation': {
          templateUrl: 'navigation-guest.html'
        }
      }
    })
    .state('app.content', {
      url: '/content',
      views: {
        'content': {
          templateUrl: 'content.html'
        }
      }
    })
    .state('app.content2', {
      url: '/content2',
      views: {
        'content': {
          templateUrl: 'content2.html'
        }
      }
    });
  }
);

app.run(function($state){
  $state.go('app.navigation-user');
});

回答1:

I would recommend using ui-router-extras and its sticky:true property.