保存以前的状态 - 角度ui路由器

时间:2014-06-24 14:04:18

标签: angularjs angular-ui-router

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

我正在尝试在下面的代码中找到一种方法来保存viewB的先前状态。我的意思是 - 你可以看到route1状态只有viewA的内容,viewB不在那里。

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

<!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>

1 个答案:

答案 0 :(得分:0)

如果indexroute1的子状态,则可以在从route1过渡到index期间工作。见this plunker

但是在您描述的情况下,状态route1必须是状态indexroute2的父级,这是不可能的(只有一个孩子的父级)。 / p>