Question

我有一个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包含上面的内容），并相应地更改视图。感谢。

Answer 1

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

理想情况下，你不会这样做，并使用ui-router的嵌套状态来解决这个问题。

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

有很多方法可以做到这一点。一种是分叉状态，因此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' : { ... } } } );

不同的视图取决于哪个州

1 个答案: