在UI路由器双重嵌套视图 [英] Doubly-nested views in UI Router

问题描述

玩弄角UI和具体使用 UI路由器模块做一些嵌套视图。我遇到了麻烦的部分内的部分渲染：

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:

嵌套如下：

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

我现在的 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',
                }
            }
        })

所有其它谐音负荷，我可以看到在浏览器中的用户界面视图指令加载，但实际部分不会呈现（在div只是包含用户界面视图=sidebar.slider文字）

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)

有什么想法？

推荐答案

视图嵌套，一个国家内部，通过他们的<一个完成href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\"相对=nofollow>相对/绝对视图名称的（不通过对象嵌套）的

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

假设，即 templateUrl 包含用户界面视图=滑块，然后我们的目标那的视图的名字绝对

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

$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:

• 为一个单一的国家组合嵌套和多视图


• 视图名称 - 相对与绝对名称

• Combining nested and multiple views for a single state
• View Names - Relative vs. Absolute Names

这篇关于在UI路由器双重嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！