Javascript 角度UI路由器多菜单（顶部水平和左侧垂直菜单）_Javascript_Angularjs_Angular Ui Router

Javascript 角度UI路由器多菜单（顶部水平和左侧垂直菜单）

javascript angularjs

Javascript 角度UI路由器多菜单（顶部水平和左侧垂直菜单）,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我有顶级菜单，然后我有左菜单，这些菜单将根据所选的顶级菜单刷新。我可以创建该链接，但只要选择左侧菜单，它就会变为空白，这在选择HOME时可以看到。此时，只有HOME已连接Route1，Route2未连接还有，这里是它的打劫如何防止在选择时重置/重新加载左侧菜单？我还想突出显示单击的左菜单 <!DOCTYPE html> <html ng-app="myapp"> <head> <title>AngularJS: UI-Router

我有顶级菜单，然后我有左菜单，这些菜单将根据所选的顶级菜单刷新。我可以创建该链接，但只要选择左侧菜单，它就会变为空白，这在选择

HOME

时可以看到。此时，只有

HOME

已连接

Route1

，

Route2

未连接

还有，这里是它的打劫

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

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


AngularJS:UI路由器快速启动
'
},
“视图B”：{
模板：“route2.viewB”
}
}
})
});

我认为您需要做的是处理子状态，而不仅仅是根状态。在每个根状态下，您可以设置左侧菜单选项

考虑下面的示例，其中

index

是根状态，我们在其中设置了左侧菜单，并设置了希望在视图中呈现子状态的位置。每个子状态（

index.LeftMenuMenu1

，

index.LeftMenuMenu2

，

index.LeftMenuMenu3

）将在放置

元素的位置呈现

$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
//根状态
.state（'索引'{
url:“”，
观点：{
//设置左侧栏
“左菜单”：{
模板：'
但是，如果您使用左侧菜单，您将只更改链接，视图也将相同，我建议用户使用另一种模式。可能有一个菜单服务来服务菜单选项。对于每个根状态，您可以使用OneNet属性触发菜单选项更新。您能解释一下f OnEnter（如有可能，举例说明）
$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"
    })