Question

使用angular-ui，特别是使用ui-router模块来执行一些嵌套视图。我无法在局部内部进行渲染：

嵌套如下：

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',
                }
            }
        })

所有其他部分加载，我可以在浏览器中看到ui-view指令加载，但实际的部分未呈现（div只包含ui-view="sidebar.slider"文字）

有什么想法吗？

Answer 1

在一个州内部的视图嵌套是通过他们的relative/absolute视图名称完成的（不是通过对象嵌套）

让我们说templateUrl包含ui-view="slider"，然后我们必须完全定位 view 名称

$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'
      },
      ...

此处的关键是视图＆＃39;滑块@ main＆＃39;的名称，其中包含视图名称＆＃39;滑块＆＃39;分隔符＆＃39; @＆＃39;和州名＆＃39; main＆＃39;。请查看这些以获取更多详细信息：

UI路由器中的双嵌套视图

1 个答案: