Question

我正在尝试调整以下代码： Plunker

以下是代码：

<!DOCTYPE html>
<html ng-app="myapp">

<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//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="LeftMenu"></div>
    </div>
    <div class="span6">
        <div class="well" ui-view="Content"></div>
    </div>
</div>

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
    $stateProvider
        .state('index', {
            url: "",
            views: {
                "LeftMenu": {
                    template: '<ul><li><a ui-sref="index.LeftMenuMenu1">Index-Left Menu1</a></li><li><a ui-sref="index.LeftMenuMenu2">Index-Left Menu2</a></li><li><a ui-sref="index.LeftMenuMenu3">Index-Left Menu3</a></li></ul>'
                },
                "Content": {
                    template: "<div ui-view></div>"
                }
            }
        })
    .state('index.LeftMenuMenu1', {
            template: "LeftMenu.Menu1 selected"
    })
    .state('index.LeftMenuMenu2', {
        template: "LeftMenu.Menu2 selected"
     })
     .state('index.LeftMenuMenu3', {
         template: "LeftMenu.Menu3 selected"
     })
    .state('route1', {
        url: "/route1",
        views: {
            "LeftMenu": {
                template: '<ul><li><a ui-sref="Route1.Menu1">Route1-Left Menu1</a></li><li><a ui-sref="Route1.Menu2">Route1-Left Menu2</a></li><li><a ui-sref="Route1.Menu3">Route1-Left Menu3</a></li></ul>'
            },
            "viewB": {
                template: "route1.viewB"
            }
        }
    })
    .state('route2', {
        url: "/route2",
        views: {
            "LeftMenu": {
                template:'<ul><li><a href="">Route2-Left Menu1</a></li><li><a href="">Route2-Left Menu2</a></li><li><a href="">Route2-Left Menu3</a></li></ul>'
            },
            "viewB": {
                template: "route2.viewB"
            }
        }
    })
});
</script>

绝对可行。我想要的是当我单击“返回”按钮时，如果选择它们，它不会返回到先前的垂直状态，而是返回到水平菜单上的上一个状态。

这可能吗？

由于

角度状态和浏览器后退按钮

0 个答案: