在ui-router中使用leftbar进行布局的嵌套状态或视图? [英] Nested states or views for layout with leftbar in ui-router?

问题描述

我有以下布局:

侧边栏和标题栏将始终存在，尽管它们的内容是特定于上下文的.

Sidebar and Headerbar will always be present though their content is context-specific.

我认为这里有两个选项:嵌套状态(sidenav > 标题栏 > 内容)或带有视图(如果我理解正确的话).不管我读了多少视频和文章，我仍然在努力让我的头脑围绕着 ui-router.

I think there are two options here: nested states (sidenav > Headerbar > Content) or with views (if I understand that correctly). I'm still struggling to get my head wrapped around ui-router regardless of how many videos and articles I've read.

单击 Sidenav 会将状态(或视图)加载到 Content 中，而 Headerbar 将根据加载到 Content 中的内容调整其内容.

Clicking on Sidenav would load a state (or view) into Content and Headerbar would adjust its content based on whatever is loaded into Content.

我的感觉是嵌套状态似乎是最简单的直接方法，尤其是在考虑继承时.

My sense is that nested states seem like the simplest direct approach, particularly when thinking about inheritance.

从另一个角度来看，它们似乎可以是兄弟姐妹(尽管继承问题可能让我错了).我的想法是，视图可以让我在未来的子项目等方面更加灵活.

Looking at it from another point of view, these seem like they could be siblings (although inheritance issues probably make me wrong). My inkling is that views would allow me more flexibility in the future with sub-items and such.

当然 ng-include 和指令也可以参与其中.

And of course ng-include and directives could play into this.

作为 ui-router 的新手，有人能在正确的方向上扇我一巴掌吗?我被困的地方是加载主视图.我希望我的用户在登录后在内容部分看到他们的仪表板.然后，当用户从侧边栏导航时，如何将新元素加载到内容中?

Being new to ui-router could someone slap me in the right direction? Where I'm stuck is loading the home view. I want my users to see their dashboard in the Content section once they log in. And then, how do I load new elements into Content as the user navigates from the Sidebar?

推荐答案

一种如何设计场景的方法有 1) 侧栏，2) 动作部分和 3) 主要区域可以像 这个工作示例

One way how to design scenario with 1) side bar, 2) action section and 3) main area could be like in this working example

首先是 root 状态.这是名为索引"的根状态.它是抽象的，可以为我们做一些resolve.它不会影响子 state 命名，也不会扩展 url(因为未定义)

Firstly the root state. Here is root state named 'index'. It is abstract and could do some resolve for us. It does not effect child state naming and does not extend the url (because is undefined)

$stateProvider
    .state('index', {
        abstract: true,
        //url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })

第一个真正的状态是list，它继承自parent，但有一个属性parent: 'index'，所以父名不会影响状态名.

The first real state is list, and it inherits from parent but with an attribute parent: 'index', so the parent name is not effecting the state name.

优点是，它可以继承很多已解决的东西.此外，对于所有其他 parent 状态

Advantage is, that it could inherit lot of resolved stuff. Also, the root state could be loaded once, for all other parent states

    .state('list', {
        parent: 'index',
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })

这是 UI-Router 真正的强大之处，因为现在我们可以看到 child 正在向两个地方注入东西 - 1) action section 和 2) main area

This is the real power of UI-Router, because now we can see that child is injecting stuff into two places - 1) action section and 2) main area

    .state('list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
          'actions@index' : {
            templateUrl: 'actions.html',
            controller: 'ActionCtrl'
          },
        },
      })

这样，我们可以在现实世界的场景中使用命名视图和多视图.请永远不要忘记范围定义是如何进行的:

This way, we can use named views and multi views in real world scenario. Please, never forget how the scope definition goes:

请记住，如果您的状态视图是嵌套的，则范围属性只会沿状态链继承.范围属性的继承与您的状态的嵌套无关，而与您的视图(模板)的嵌套有关.

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

您完全有可能拥有嵌套状态，其模板在您的站点内的各种非嵌套位置填充 ui-views.在这种情况下，您不能期望在子状态视图中访问父状态视图的范围变量.

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

在这里

这篇关于在ui-router中使用leftbar进行布局的嵌套状态或视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！