节省previous状态 - 角UI路由器

本文介绍了节省previous状态 - 角UI路由器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是一个关于UI路由器教程的code。我有一个问题了。

我试图找到一种方法来保存低于code为viewB的previous状态。我的意思是 - 你可以看到ROUTE1状态只具有viewA内容，viewB是不存在的。

我的问题是 - 这可能当我选择ROUTE1状态，与模板route1.viewA但不进行更新，以空的权利，但右边的框中的previous内容更新viewA - route2.viewB或index.viewB呆在那里依赖于previous状态？

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用程序=的myapp＆GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT; AngularJS：UI-路由器快速启动＆LT; /标题＆GT;
    ＆LT;链接HREF =http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
 ＆LT; /头＆GT;
 ＆LT;车身类=容器＆GT;
   ＆LT; DIV CLASS =导航栏＆GT;
     ＆LT; DIV CLASS =Navbar的内部＆GT;
       ＆LT;一类=品牌UI-SREF =指数＆GT;快速启动＆LT; / A＆GT;
       ＆LT; UL类=导航＆GT;
         ＆LT;立GT;＆LT;一个UI的SREF =指数＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
         ＆LT;立GT;＆LT;一个UI的SREF =ROUTE1＆GT; 1号线和LT; / A＆GT;＆LT; /李＆GT;
         ＆LT;立GT;＆LT;一个UI的SREF =路径2＆GT;路线2'; / A＆GT;＆LT; /李＆GT;
       ＆LT; / UL＆GT;
     ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
   ＆LT; DIV CLASS =行＆GT;
     ＆LT; DIV CLASS =span6＆GT;
       ＆LT; DIV CLASS =以及用户界面视图=viewA＆GT;＆LT; / DIV＆GT;
     ＆LT; / DIV＆GT;
     ＆LT; DIV CLASS =span6＆GT;
       ＆LT; DIV CLASS =以及用户界面视图=viewB＆GT;＆LT; / DIV＆GT;
     ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
   ＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js＆GT;＆下; /脚本＆GT;
   ＆所述; SCRIPT SRC =http://angular-ui.github.io/ui-router/release/angular-ui-router.js＆GT;＆下; /脚本＆GT;
   ＆LT;脚本＆GT;
     VAR的myapp = angular.module（'MyApp的，[ui.router]）
     myapp.config（函数（$ stateProvider）{
     $ stateProvider
     .STATE（'指数'，{
        网址：
        观点：{
            viewA：{
                模板：index.viewA
            }，
            viewB：{
                模板：index.viewB
            }
        }
    }）
    .STATE（'ROUTE1'，{
        网址：/ ROUTE1
        观点：{
            viewA：{
                模板：route1.viewA
            }
        }
    }）
    .STATE（'路径2'，{
        网址：/路径2
        观点：{
            viewA：{
                模板：route2.viewA
            }，
            viewB：{
                模板：route2.viewB
            }
        }
    }）
}）
    ＆LT; / SCRIPT＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

它可以从首页到 ROUTE1 如果 ROUTE1 是首页的子状态。请参见。

但在你所描述的情况下，国家 ROUTE1 必须是国家首页和双方的父母路径2 这是不可能的（只有一个父亲对孩子）。

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).

                        这篇关于节省previous状态 - 角UI路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！