改变到另一种状态时持续状态 [英] Persist state when changing to another state

问题描述

我要创建动态导航，我可以通过状态而改变导航项目，问题是，当我改变内容，导航被清除了，我已经尝试过这
<一href=\"http://stackoverflow.com/questions/25815505/how-can-i-persist-sibling-ui-views-when-changing-state\">solution
但似乎不工作的情况下，我

下面是我的 plunker

这是我的状态配置

  VAR应用= angular.module（'knax'，['ui.router'，'ui.bootstrap']）;的app.config（
  功能（$ stateProvider）{    $ stateProvider.state（'应用'，{
      观点：{
        '@'：{
          templateUrl：'的layout.html
        }，
        导航布局@应用：{
          templateUrl：导航的layout.html
        }，
        内容布局@应用：{
          templateUrl：'内容的layout.html
        }      }
    }）
    .STATE（'app.navigation用户'，{
      观点：{
        导航：{
          templateUrl：导航user.html
        }
      }
    }）
    .STATE（'app.navigation客体'，{
      观点：{
        导航：{
          templateUrl：导航guest.html
        }
      }
    }）
    .STATE（'app.content'，{
      网址：'/内容'，
      观点：{
        内容：{
          templateUrl：content.html
        }
      }
    }）
    .STATE（'app.content2'，{
      网址：'/内容2，
      观点：{
        内容：{
          templateUrl：content2.html
        }
      }
    }）;
  }
）;app.run（函数（$州）{
  $ state.go（'app.navigation用户'）;
}）;
 

解决方案

我建议使用UI的路由器演员和粘：真正的属性

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');
});

解决方案

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

这篇关于改变到另一种状态时持续状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！