Question

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

我正在尝试做同样的事情，但不能解决这个问题我需要知道我能做到这一点的方式。我知道使用angular指令的用例，如ng-if等，但我想以某种方式使用partials。

我正在AngularJs使用UI-Router。

Answer 1

ui-router解决方案可能与此plunker中的解决方案类似，我已经创建了 ui-router方式。没有必要使用一些视图渲染指令ala ng-if，ng-show ......这实际上将逻辑从业务转移到视图中。

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

更好的解决方案是从ui-router的内置功能中获益，例如：

Templates （让我引用:)

<强> TemplateUrl
  ... templateUrl也可以是返回网址的函数。 需要一个预设参数stateParams，它不会被注入。

<强> TemplateProvider
  或者您可以使用模板提供程序功能，可以注入，可以访问本地，并且必须返回模板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,
  };
})

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

＆＃34; tpl.loggedin.html＆＃34;
＆＃34; tpl.loggedoff.html＆＃34;

剩下的东西是非常可取的，状态定义，未经授权访问的一些重定向......请观察example。

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

检查此工作中的解决方案plunker

Answer 2

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

检查控制器是否已成功登录，并为此值分配一个（$ scope）变量，并将其用作显示或隐藏导航栏某些元素的条件。

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

2 个答案:

Templates （让我引用:)