Question

我有顶级菜单，然后我离开菜单，将根据所选的顶级菜单刷新。我可以创建该链接，但是当我选择左侧菜单时，它会变为空白，这在选择HOME时可以看到。目前只有HOME与Route1相关联。 Route2未接通。

这里也是Plunker http://plnkr.co/edit/Jwow4VtNsSfMMcpv6qaa?p=preview

如何在选择时阻止重置/重新加载左菜单？我还想突出显示点击的左侧菜单。

<!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="LeftMenuMenu1">Index-Left Menu1</a></li><li><a ui-sref="LeftMenuMenu2">Index-Left Menu2</a></li><li><a ui-sref="LeftMenuMenu3">Index-Left Menu3</a></li></ul>'
                    },
                    "Content": {
                        template: "LeftMenu index selected"
                    }
                }
            })
             .state('LeftMenuMenu1', {
                 views:{
                 "Content": {
                     template: "LeftMenu.Menu1 selected"
                 }
             }
        })
        .state('LeftMenuMenu2', {
             views: {
                 "Content": {
                     template: "LeftMenu.Menu2 selected"
                 }
             }
         })
         .state('LeftMenuMenu3', {
             url: "",
             views: {
                 "Content": {
                     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>

</body>

</html>

Answer 1

我认为你想要做的是使用子状态，而不仅仅是根状态。在每个根状态下，您都可以设置左侧菜单选项。

考虑以下示例，其中index是根状态，我们在其中设置左侧菜单并设置我们希望在视图中呈现子状态的位置。然后，每个子状态（index.LeftMenuMenu1，index.LeftMenuMenu2，index.LeftMenuMenu3）将在我们放置<div ui-view=content></div>元素的位置进行渲染。

$stateProvider
    //Root state
    .state('index', {
        url: "",
        views: {
            //Set left side bar
            "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>'
            },
            //Each substate will live here
            "Content": {
                template: "<div ui-view></div>"
            }
        }
    })
    //substates
    .state('index.LeftMenuMenu1', {
        template: "LeftMenu.Menu1 selected"
    })
    .state('index.LeftMenuMenu2', {
        template: "LeftMenu.Menu2 selected"
    })
    .state('index.LeftMenuMenu3', {
        template: "LeftMenu.Menu3 selected"
    })

然后，您将此模式重新用于页面上的其他部分。

$stateProvider
    ...
    //Root state route 1
    .state('route1', {
        url: "/route1",
        views: {
            "LeftMenu": {
                template: 'Route 1 menu options..'
            },
            "Content": {
                template: "<div ui-view></div>"
            }
        }
    })
    .state('route1.LeftMenuMenu1', {
        template: "LeftMenu.Menu1 selected"
    })
    .state('route1.LeftMenuMenu2', {
        template: "LeftMenu.Menu2 selected"
    })
    //Root state route 2
    .state('route2', {
        url: "/route2",
        views: {
            "LeftMenu": {
                template: 'Route 2 menu options..'
            },
            "Content": {
                template: "<div ui-view></div>"
            }
        }
    })
    .state('route2.LeftMenuMenu1', {
        template: "LeftMenu.Menu1 selected"
    })
    .state('route2.LeftMenuMenu2', {
        template: "LeftMenu.Menu2 selected"
    })

Updated plunker

但是，左边菜单的情况是你只会更改链接而且视图会相同，我建议用户使用另一种模式。可能有一个服务菜单选项的菜单服务。对于每个根状态，您可以使用onEnter属性来触发要更新的菜单选项。

Angular UI-Router多菜单（顶部水平和左侧垂直菜单）

1 个答案: