Angular UI-router 在多视图到单视图之间切换答案

【问题标题】：Angular UI-router switch between multi views to single viewAngular UI-router 在多视图到单视图之间切换
【发布时间】：2015-09-21 08:16:15
【问题描述】：

我有一个具有三个视图的应用程序（ui-view 使用 Angular ui-router）：标题、侧边栏和内容。

我的 index.html 看起来像这样：（为了清楚起见，我省略了实际的类）

<body>
    <div ui-view="header" class="..."></div>

    <div class="page-container">
        <div ui-view="sidebar" class="..."></div>
            <div class="page-content"> 
                <div ui-view="content"></div>
            </div>
        </div>
    </div>
</body>

此模式适用于具有 header 和 sidebar 的页面。但是我有一些页面我不想显示 header 和 sidebar，例如应该适合所有页面的登录页面。对于这种页面，我需要类似的东西：

ui-view 应该是这样的：

<body>
     <div ui-view="content"></div>
</body>

因此它不会嵌套在其他视图<div> 下并受其类的影响。

我有一些解决方案，但没有一个给我足够好的用户体验。我尝试根据状态将<ng hide> 添加到header 和sidebar。它有效，但有烦人的闪烁（由于某种原因，我无法用ng-cloak 消除它......）

为了让事情更清楚，这里有两种状态的例子，一种是“单页机”，另一种是带有页眉和侧边栏的整页：

.state('Login', {
  url: '/login',
  views: {                  
    'content': {
      templateUrl: './../templates/login.html',
      controller: 'LoginCtrl'
    }
  }
})
.state('Users', {
  url: '/users',
  views: {    
    'header': {
      templateUrl: './../templates/header.html',
      controller: 'HeaderCtrl'
    },    
    'sidebar': {
      templateUrl: './../templates/sidebar.html',
      controller: 'SidebarCtrl'
    },                            
    'content': {
      templateUrl: './../templates/users.html',
      controller: 'UsersCtrl'
    }
  }
})

我也认为使用嵌套视图，但不确定这是否是正确的方法。

【问题讨论】：

我的方法是始终拥有超级父母 - 每个州的家庭。例如。 root（通常） rootDoc（文档状态系列） rootSec（登录）...这些根状态确实包含主模板...这意味着，其中一些不必保留标题或侧边栏...

标签： angularjs angular-ui-router

【解决方案1】：

也许尝试使用嵌套状态，即：

.state('app', {
  url: '/app',
  abstract: true,
  templateUrl: './../templates/treeViewTemplate.html'
})
.state('login', {
  url: '/login',
  templateUrl: './../templates/login.html',
  controller: 'LoginCtrl'
})
.state('app.users', {
  url: '/users',
  views: {    
    'header': {
      templateUrl: './../templates/header.html',
      controller: 'HeaderCtrl'
    },    
    'sidebar': {
      templateUrl: './../templates/sidebar.html',
      controller: 'SidebarCtrl'
    },                            
    'content': {
      templateUrl: './../templates/users.html',
      controller: 'UsersCtrl'
    }
  }
})

在您的根抽象状态中，您为 3 视图布局定义了一个模板。 login 状态将取而代之的是整个显示。

【讨论】：