在 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 > Headerbar > Content)或视图(如果我理解正确的话).不管我读了多少视频和文章，我仍然在努力让我的头脑围绕 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 会将状态(或视图)加载到内容中，标题栏会根据加载到内容中的内容调整其内容.

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 状态.这是名为index"的根状态.它是抽象的，可以为我们做一些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',},
        },
      })

第一个真实状态是列表，它继承自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.

优点是，它可以继承很多已解析的东西.此外，根状态可以加载一次，用于所有其他父状态

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-view.在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量.

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屋！