保存之前的状态 - angular ui-router [英] Save previous state - angular ui-router

查看：23
本文介绍了保存之前的状态 - angular ui-router的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个关于ui路由器的教程代码.我有一个问题.

我试图在下面的代码中找到一种方法来保存 viewB 的先前状态.我的意思是 - 您可以看到 route1 状态仅包含 viewA 的内容，viewB 不存在.

我的问题是-当我选择route1状态时，viewA是否可以用模板route1.viewA更新但右边不更新为空，而是右边框的先前内容-route2.viewB还是 index.viewB 留在那里取决于以前的状态?

<html ng-app="myapp"><头><title>AngularJS:UI-Router 快速入门</title><link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"><body class="容器"><div class="navbar"><div class="navbar-inner"><a class="brand" ui-sref="index">快速入门</a><ul class="nav"><li><a ui-sref="index">首页</a></li><li><a ui-sref="route1">路线 1</a></li><li><a ui-sref="route2">Route 2</a></li>

<div class="row"><div class="span6"><div class="well" ui-view="viewA"></div>

<div class="span6"><div class="well" ui-view="viewB"></div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script><script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script><脚本>var myapp = angular.module('myapp', ["ui.router"])myapp.config(function($stateProvider){$stateProvider.state('索引', {网址:"",意见:{视图A":{模板:index.viewA"},视图B":{模板:index.viewB"}}}).state('route1', {网址:/route1"，意见:{视图A":{模板:route1.viewA"}}}).state('route2', {网址:/route2"，意见:{视图A":{模板:route2.viewA"},视图B":{模板:route2.viewB"}}})})</html>

解决方案

它可以在从 index 到 route1 的过渡期间工作，如果 route1是 index 的子状态.请参阅这个plunker.

但在您描述的情况下，状态 route1 必须是状态 index 和 route2 的父级，这是不可能的(一个孩子只有一位家长).

This is a code of a tutorial about ui router. I have a question about it.

I am trying to find a way to save the previous state for viewB in the code below. What I mean - you can see that route1 state has content only for viewA, viewB isn't there.

My question is - is it possible when I choose route1 state, the viewA to be updated with the template route1.viewA but the right not to be updated to be empty, but the previous content of the right box - route2.viewB or index.viewB to stay there depends on the previous state?

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body class="container">
   <div class="navbar">
     <div class="navbar-inner">
       <a class="brand" ui-sref="index">Quick Start</a>
       <ul class="nav">
         <li><a ui-sref="index">Home</a></li>
         <li><a ui-sref="route1">Route 1</a></li>
         <li><a ui-sref="route2">Route 2</a></li>
       </ul>
     </div>
   </div>
   <div class="row">
     <div class="span6">
       <div class="well" ui-view="viewA"></div>        
     </div>
     <div class="span6">
       <div class="well" ui-view="viewB"></div>        
     </div>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
   <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
   <script>
     var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider){
     $stateProvider
     .state('index', {
        url: "",
        views: {
            "viewA": {
                template: "index.viewA"
            },
            "viewB": {
                template: "index.viewB"
            }
        }
    })
    .state('route1', {
        url: "/route1",
        views: {
            "viewA": {
                template: "route1.viewA"
            }
        }
    })
    .state('route2', {
        url: "/route2",
        views: {
            "viewA": {
                template: "route2.viewA"
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })
})
    </script>
  </body>
</html>

解决方案

It could work during the transition from index to route1 if route1 is a child state of index. See this plunker.

But in the case you describe, the state route1 must be a parent of both the state index and route2 which is not possible (only one parent for a child).

这篇关于保存之前的状态 - angular ui-router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆