在 AngularJs 中使用 UI-Router 更改导航菜单

Posted 2023-02-27

【中文标题】在 AngularJs 中使用 UI-Router 更改导航菜单

【英文标题】：Changing Navigation Menu using UI-Router in AngularJs

【发布时间】：2014-10-22 06:12:41

【问题描述】：

我正在尝试像任何社交网站一样构建导航菜单，即如果我是logged-Out，我可以看到input fields 要求Username 和Password，但如果我是logged-In 那么我可以看到我的个人资料、设置等。

我正在尝试做同样的事情，但无法解决这个问题我只需要知道我可以做到这一点的方式。我知道使用 angular 指令的用例，例如 ng-if 等，但我正在考虑以某种方式使用部分。

我正在使用 AngularJs 和 UI-Router。

【问题讨论】：

您应该从阅读文档开始，观察示例/示例应用程序，您会发现这是一项针对多视图功能的任务。在这里你可以找到一些links 从哪里开始

我知道ng-* 指令的用法，但我想使用部分指令（如果可以的话）

你看到我的链接了吗？它是关于 ui-router，真正唯一合理的状态/视图管理工具...我从未提到任何 ng-*...

@RadimKöhler 我已经阅读了您建议的链接，但仍然找不到解决方案

@AnkitLadhania，很高兴，真的很高兴您浏览了上述资源。真的很好。因此，为了加快您的 ui-router 使用速度，我为您创建了一个示例。希望它会有所帮助 ;) 享受令人惊叹的 lib ui-router ;)

【参考方案1】：

ui-router 解决方案可能类似于 plunker，我创建该解决方案是为了展示 ui-router 方式。没有必要使用一些视图渲染指令ala ng-if, ng-show...实际上将逻辑从业务移动到视图中。

example 展示了一个全面的设计，为未经授权的用户提供重定向，以及向任何人授予公共访问权限，支持在一个视图中登录/注销等。

更好的解决方案是利用ui-router 的内置功能，例如：

Templates （让我引用：）

模板网址 ...templateUrl 也可以是返回 url 的函数。 它需要一个预设参数stateParams，不注入。

模板提供者 或者您可以使用 模板提供程序 函数，该函数可以被注入，可以访问本地，并且必须返回模板 html...

所以，我们可以在示例中看到。首先有两个视图的根状态，其中一个是标准锚点，用于所有主要的未命名子视图ui-view=""

$stateProvider
.state('root', 
  abstract: true,
  views: 
    '': templateUrl: 'tpl.root.html', ,
    'loginfo@root': 
      templateProvider: templateSelector,
      controller: 'LoginCtrl',
    
  
)

templateSelector 是这样的：

var templateSelector = function($http, UserService) 

  var templateName = UserService.isLogged
    ? "tpl.loggedin.html"
    : "tpl.loggedoff.html"
    ;

  return $http
    .get(templateName)
    .then(function(tpl)
      return tpl.data;
    );
;

本例依赖简单设置：

.factory('UserService', function() 
  return 
    isLogged: false,
  ;
)

就是这样，我们确实有两个模板：

“tpl.loggedin.html” “tpl.loggedoff.html”

剩下的东西是可以预料的，状态定义，一些未授权访问的重定向......请注意example。

根据用户登录或注销的事实互换

检查这个工作plunker中的解决方案

【参考方案2】：

您可以使用以下角度指令之一：ng-if、ng-show、ng-hide

如果用户已成功登录，请检查您的控制器，并将此值分配给 ($scope) 变量，并将其用作显示或隐藏导航栏某些元素的条件。