不同的视图取决于哪个状态答案

【问题标题】：Different view depending on which state不同的视图取决于哪个状态
【发布时间】：2016-09-11 23:41:19
【问题描述】：

我有一个 Angular 页面，它有一个登录页面、一个注册帐户页面和页面的其余部分。登录/注册看起来与其他页面不同，因为它们没有侧边栏、工具栏等。完全不同的布局。我有一个索引页面和一个索引控制器，它确定当前要加载哪个视图。像这样的：

<body ng-app="myApp" ng-controller="IndexController as vm">
    <div ui-view ng-if="$state.current.name === 'home'"></div>
    <div ng-if="$state.current.name !== 'home'">
        <!--TOOLBAR-->
        <!--SIDEBAR-->
        <div ui-view></div>
    </div>
</body>

所以基本上如果当前状态是home，它应该加载第一个视图（没有工具栏、sidenav 等）。如果当前状态未设置为home，则应显示工具栏、侧边栏等。我认为这会起作用，但有没有更好的方法呢？我的app.js 中有我所有的状态。

如果有更好的方法来分隔不同的视图，请告诉我。为什么我这样做，是因为我想将所有包含（模型、视图、控制器）和其他脚本保留在一个页面上（我的 index.html 包含上述内容）并相应地更改视图。谢谢。

【问题讨论】：

标签： angularjs

【解决方案1】：

使用controller as 语法，我假设$state 没有定义。您应该将它添加到控制器范围（不是 $scope）（this.$state = $state）并使用vm.$state.current... 调用它。

理想情况下，您不会这样做，而是使用 ui-routers 嵌套状态，它可以完全解决这个问题。

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views

有很多方法可以做到这一点。一种是 fork 状态，这样 home 就不会继承父视图。

$stateProvider.state('home', {})
.state('app', {}) // has parent views like menu
.state('app.foo', {}) // inherits views from app

或使用命名视图

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

$stateProvider.state('app' { views: { menu: { ... } } } )
.state('app.home', { views: { 'menu@app': { /* inject empty tpl */ }, 'content@app' : { ... }  } )
.state('app.foo', { views: { 'content@app' : { ... } } } );

【讨论】：

所以我会简单地做这样的事情：首页有登录和注册。 home.signin 和 home.signup 作为状态。然后简单地做我之前做的，检查状态是否设置为home？
做你不能让你的模板检查状态的事情。模板应尽可能与状态分离。在状态提供程序中执行该逻辑。
那么我将如何制作我的视图/模板？不同的结构（如您所见）。
我会使用命名视图方法
这对我来说真的不起作用。它仍然加载了模板，然后就被隐藏了。