UI路由器中的双嵌套视图

时间：2021-08-27 10:45:16

Playing around with angular-ui and specifically using the ui-router module to do some nested views. I'm having trouble getting a partial to render within a partial:

使用angular-ui，特别是使用ui-router模块来执行一些嵌套视图。我很难在部分中渲染部分

The nesting is as follows:

嵌套如下:

index.html
    -main.form.html
    -main.sidebar.html
        -sidebar.slider.html

My current app.js setup is:

我目前的app.js设置是:

$stateProvider
        .state('main', {
            url: '/',
            views: {
                'sidebar': {
                    templateUrl: 'views/partials/main.sidebar.html',
                    views: {
                        'slider': {
                            templateUrl: 'views/partials/sidebar.slider.html'
                        }

                    }

                },
                'form': {
                    templateUrl: 'views/partials/main.form.html',

                },
                'tribute': {
                    templateUrl: 'views/partials/main.tribute.html',
                },
                'submit': {
                    templateUrl: 'views/partials/submit.html',
                }
            }
        })

All other partials load and I can see the ui-view directive loading in the browser, but the actual partial isn't rendered (the div just contains the ui-view="sidebar.slider" literal)

所有其他部分加载，我可以在浏览器中看到ui-view指令加载，但是实际的部分没有呈现(div仅仅包含ui-view="侧栏。滑块文字)

Any thoughts?

任何想法吗?

1 个解决方案

#1

3  

The view nesting, inside of one state, is done via their relative/absolute view name (not via object nesting)

在一个状态内的视图嵌套是通过它们的相对/绝对视图名(不是通过对象嵌套)完成的

Let's say, that the templateUrl contains the ui-view="slider", then we have to target that view name absolutely

假设templateUrl包含ui-view="slider"，那么我们必须将视图名作为绝对目标

$stateProvider
   .state('main', {
     url: '/',
     views: {
      'sidebar': {
         templateUrl: 'views/partials/main.sidebar.html',
       },
      // this view definition is on the same level
      // but the absolute name says, that it should be searched
      // inside of the 'main' state
      'slider@main': {
         templateUrl: 'views/partials/sidebar.slider.html'
      },
      ...

the key here is the name of the view 'slider@main', which contains from view name 'slider' delimiter '@' and the state name 'main'. Check these for more details:

这里的键是视图'slider@main'的名称，它包含视图名'slider' delimiter '@'和状态名'main'。详情请参阅以下资料:

#1

3  

The view nesting, inside of one state, is done via their relative/absolute view name (not via object nesting)

在一个状态内的视图嵌套是通过它们的相对/绝对视图名(不是通过对象嵌套)完成的

Let's say, that the templateUrl contains the ui-view="slider", then we have to target that view name absolutely

假设templateUrl包含ui-view="slider"，那么我们必须将视图名作为绝对目标

$stateProvider
   .state('main', {
     url: '/',
     views: {
      'sidebar': {
         templateUrl: 'views/partials/main.sidebar.html',
       },
      // this view definition is on the same level
      // but the absolute name says, that it should be searched
      // inside of the 'main' state
      'slider@main': {
         templateUrl: 'views/partials/sidebar.slider.html'
      },
      ...

the key here is the name of the view 'slider@main', which contains from view name 'slider' delimiter '@' and the state name 'main'. Check these for more details:

这里的键是视图'slider@main'的名称，它包含视图名'slider' delimiter '@'和状态名'main'。详情请参阅以下资料:

标签：

相关文章