Question

我有以下布局：

enter image description here

补充工具栏和标题栏将始终存在，但其内容是特定于上下文的。

我认为这里有两个选项：嵌套状态（sidenav＆gt; Headerbar＆gt; Content）或视图（如果我理解正确的话）。无论我阅读了多少视频和文章，我仍然在努力让我的脑袋缠绕在ui-router上。

单击Sidenav会将状态（或视图）加载到Content中，Headerbar会根据加载到Content中的内容调整其内容。

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

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

当然，ng-include和指令也可以发挥作用。

成为ui-router的新手可能有人打我正确的方向吗？我被困的地方正在加载主视图。我希望我的用户在登录后可以在“内容”部分中查看他们的信息中心。然后，当用户从补充工具栏导航时，如何将新元素加载到内容中？

Answer 1

如何设计方案的一种方法：1）侧栏，2）动作部分和3）主区域可以像this working example

首先是 root 状态。这是根状态名为＆＃39; index＆＃39;。它是抽象的，可以为我们做一些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'
          },
        },
      })

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

Scope Inheritance by View Hierarchy Only

请记住，只有嵌套状态的视图时，范围属性才会继承状态链。范围属性的继承与状态的嵌套无关，也与视图嵌套（模板）无关。

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

检查所有操作here

Answer 2

我只是想分享一下我的经验。有

类似的Q＆amp;答：Angular UI Router - Nested States with multiple layouts
和链接to working plunker

州def的片段：

$stateProvider
    .state('index', {
        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',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        }

简而言之，我确实使用嵌套方法。

它类似于http://angular-ui.github.io/ui-router/sample/#/中提供的“核心示例”。它是分层的（实体列表/细节）

而且，我使用隐藏的超级根状态：

点击Updating resolved objects in ui.router parent states
examle link

处理安全相关的东西 - 一次，并在所有子州之间共享：

$stateProvider
  .state('root', {
    abstract: true,
    template: '<div ui-view></div>',
    resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
    controller: 'rootController',
  })
  .state('home', {
    parent: "root",
    url: '/home',
    templateUrl: 'tpl.example.html',
  })
  .state('search', {
    parent: "root",
    url: '/search',
    templateUrl: 'tpl.example.html',
  })

希望它确实能够启发这一点，因为UI-Router的功能我在多视图中看到，查看嵌套，范围继承和逻辑状态机背后

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

2 个答案:

Scope Inheritance by View Hierarchy Only