在ui-router中使用左栏布局的嵌套状态或视图？

Question

我有以下布局:

边栏和标题栏将始终存在,但其内容是特定于上下文的.

我认为这里有两个选项:嵌套状态(sidenav> Headerbar> Content)或视图(如果我理解正确的话).无论我读过多少视频和文章,我仍然在努力让我的脑袋缠绕在ui-router上.

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

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

从另一个角度来看,这些似乎可能是兄弟姐妹(虽然继承问题可能让我错了).我的观点是,观点将使我在未来的子项目等方面具有更大的灵活性.

当然,ng-include和指令也可以发挥作用.

成为ui-router的新手可能有人会把我拉向正确的方向吗？我卡住的地方正在加载主页视图.我希望我的用户在登录后可以在"内容"部分中看到他们的信息中心.然后,当用户从补充工具栏导航时,如何将新元素加载到内容中？

Answer 1

设计方案的一种方法有1)侧栏,2)动作部分和3)主区域可以像在这个工作示例中一样

首先是根状态.这是名为'index'的根状态.它是抽象的,可以resolve为我们做一些事情.它不会影响子状态命名,也不会扩展url(因为未定义)

$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',因此父名称不影响状态名称.

优点是,它可以继承许多已解决的东西.此外,对于所有其他父状态,可以为根状态加载一次

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

这是UI-Router的真正力量,因为现在我们可以看到孩子将东西注入两个地方 - 1)行动部分和2)主要区域

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

这样,我们可以在真实场景中使用命名视图和多视图.请永远不要忘记范围定义如何:

仅按视图层次结构的范围继承

请记住,只有嵌套状态的视图时,范围属性才会继承状态链.范围属性的继承与状态的嵌套以及与视图(模板)的嵌套有关的所有内容都无关.

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

检查所有的行动在这里