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

Question

我正在尝试构建一个像任何社交网站一样的导航菜单，即如果我logged-Out，我可以看到输入字段要求用户名 和密码 但如果我登录 然后我可以看到我的个人资料、设置等。

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

我正在使用 AngularJs 和 UI-Router。

Answer 1

ui-router 解决方案可能像这个 plunker ，我创建的目的是展示ui-router 方式。无需使用 ng-if、ng-show 等 View 渲染指令……这实际上将逻辑从业务转移到了 View 中。

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

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

Templates (让我引用:)

TemplateUrl
... templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.

TemplateProvider
Or you can use a template provider function which can be injected, has access to locals, and must return template HTML...

那么，我们可以在示例中看到什么。首先有一个带有两个 View 的根状态，其中一个是标准 anchor ，用于所有未命名的主要 subview 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