Question

我有一个有三个视图的应用程序（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>

此模式适用于具有标题和侧边栏的网页。但我有一些页面，我不想显示标题和侧栏，例如一个适合所有页面的登录页面。对于这种页面，我需要这样的东西：

ui-view应该如下所示：

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

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

我有一些解决方案，但没有一个给我足够好的用户体验。我尝试将<ng hide>添加到标题和侧边栏，具体取决于状态。它工作但有恼人的闪烁（由于某种原因，我无法用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'
    }
  }
})

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

Answer 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州将完全展示。

角度UI路由器在多视图到单个视图之间切换

1 个答案: