gpt4 book ai didi

javascript - 如何在angularjs中制作动态侧边栏

转载 作者:行者123 更新时间:2023-12-02 17:16:39 25 4
gpt4 key购买 nike

我有一个这样的模板:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="opencubesDashboardApp">
<div class="ui inverted fixed transparent main menu" >
MENU
</div>

<ng-view>
</ng-view>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/semantic-ui/0.18.0/javascript/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/0.18.0/css/semantic.min.css">

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
...
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
...
<script src="scripts/controllers/mod.js"></script>
<!-- endbuild -->
</body>
</html>

问题是主菜单可以根据 View 改变或不改变。示例:

  • /mod/:slug 路由包含选项卡概述(已选择)、统计编辑常规、< kbd>编辑正文和操作
  • /mod/:slug/stats 路由包含选项卡概述统计(选定)、编辑常规编辑正文操作
  • /mod/:slug/edit/general 路由包含选项卡概述统计编辑常规 (选择),编辑正文操作
  • ...
  • /user 路由包含标签概述(已选择)、统计编辑个人资料操作
  • ...

是否有一种干净的方法可以轻松管理此问题?

最佳答案

您可以在根范围(或接近根范围)中创建一个函数,该函数接收表示菜单项的数组 [{title: '', href: ''}] 并从传递到所需菜单的每个路由的 Controller 执行它内容。

在 ui-router 中,您可以通过每个路由的 resolve 属性来完成此操作。例如,创建一个工厂,将所有可能的菜单状态拉入其中并在解析中调用它。

或者您可以根据当前状态名称显示/隐藏菜单元素。

其实有很多方法。

关于javascript - 如何在angularjs中制作动态侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24384206/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com