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

前端之家收集整理的这篇文章主要介绍了angularjs – 在ui-router中使用左栏布局的嵌套状态或视图?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下布局:

侧边栏和页眉将始终存在,尽管它们的内容是特定于上下文的。

我认为这里有两个选项:嵌套状态(sidenav> Headerbar>内容)或视图(如果我正确理解)。我仍然努力让我的头包裹在ui路由器,不管我看过多少视频和文章

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

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

从另一个角度来看,这些似乎可能是兄弟姐妹(虽然继承问题可能使我错了)。我的意见是,意见将使我在未来有更多的灵活性与子项目等。

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

对于ui-router来说,新的人可能会向我正确的方向拍拍我吗?我被卡住的地方是加载家庭视图。登录后,我希望用户在“内容”部分看到他们的信息显示板。然后,如何在用户从侧栏导航时如何将新元素加载到“内容”?

一种如何设计场景,1)侧栏,2)动作部分和3)主区域可能像 this working example

首先是根状态。这里是根状态命名为’index’。这是抽象的,可以为我们做一些决心。它不影响儿童状态命名,并且不会扩展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',})

第一个真实状态是列表,它继承自父项,但是具有属性parent:’index’,因此父名称不会影响状态名称

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

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

这是UI路由器的真正实力,因为现在我们可以看到孩子正在注入两个地方 – 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

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).

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.

检查所有在行动here

猜你在找的Angularjs相关文章