这是关于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>
答案 0 :(得分:0)
如果index
是route1
的子状态,则可以在从route1
过渡到index
期间工作。见this plunker。
但是在您描述的情况下,状态route1
必须是状态index
和route2
的父级,这是不可能的(只有一个孩子的父级)。 / p>