gpt4 book ai didi

javascript - Angular.js - 如何加载不同的菜单

转载 作者:行者123 更新时间:2023-11-30 16:29:50 25 4
gpt4 key购买 nike

我正在开始 jquery 将应用程序迁移到 angular,但这让我有点复杂。我需要知道在登录任何用户时是否有人可以帮助我作为路由和负载 Controller 。有两种类型的用户

  • 学生
  • 教师

每个都有不同的菜单,而菜单又有不同的 html 页面。根据用户的 Angular 色输入然后加载特定菜单。

使用 jQuery 加载事件,并更改在 div 内更改的内容。我想知道如何使用 angular 执行此过程。

index.html

<html>
<head> Files ... </head>
<body>
<div id="container"></div>
</body>
</html>

学生菜单.html

<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>

学生页面

option-1.html
option-2.html
option-3.html
option-N.html

教师菜单.html

<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>

教师页面

option-1.html
option-2.html
option-3.html
option-N.html

enter image description here

感谢清晰的解释。

最佳答案

请考虑阅读有关在您的精彩应用程序中包含 ui-router 的内容,并了解 templateProvider 的用法。

一旦你完成了上面的事情,你所需要的就是:

  1. 创建 Service 将具有 getCurrentUserStatus() 应该从加载的数据中获取用户在您系统中的状态
  2. 根据状态配置您的 child views: { 'menu': { ... } } with

    //somewhere above
    const TEMP = {
    user: 'path/to/file.tpl.html',
    admin: 'path/to/admin.tpl.html'
    }

    //somewhere in view configuretion
    ...,
    templateProvider (AuthService) {
    return TEMP[AuthService.getCurrentUserStatus()];
    },
    ...
  3. 使用完全相同的选择所需模板的方法创建所有其他页面。

附言这允许您扩展变量模板列表,除非您的想象力会空虚 :D

附言新手方式 - 每个 View 上的很多 ng-includeng-if 将根据查看器进行更改。

关于javascript - Angular.js - 如何加载不同的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33489551/

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