Question

我正在尝试使用命名视图定义嵌套状态。但它不起作用，请看下面的代码和插件。这可能是什么问题。

.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/profiles/calendar');
        $stateProvider
            .state('profiles', {
              url : '/profiles',
              abstract : true,
            })
            .state('profiles.calendar', {
                url: '/profiles/calendar',
                views: {
                    "": {
                        template: '<div>' +
                            '  <h1>Main</h1>' +
                            '  <div ui-view="leftSidePaneModule"></div>' +
                            '</div>',
                    },
                    'leftSidePaneModule@profiles.calendar': {
                        template: '<div>' + 
                                  '  <div ui-view="leftWidgetOne"></div>' + 
                                  '  <div ui-view="leftWidgetTwo"></div>' +
                                  '</div>',
                    },
                    'leftWidgetOne@profiles.calendar': {
                        template: '<h2>One</2>',
                    },
                    'leftWidgetTwo@profiles.calendar': {
                        template: '<h2>Two</2>',
                    },
                }
            });
    })

这是插件：http://plnkr.co/edit/nhzHMixgP4hOLmLoPbYv?p=preview

Answer 1

你快到了。检查更新的plunker here。

而不是：

.state('profiles.calendar', {
    url: '/profiles/calendar',

我们必须使用它：

.state('profiles.calendar', {
    url: '/calendar',

因为我们打电话：

$urlRouterProvider.otherwise('/profiles/calendar');

并且url是从父级和子级状态连接的...所以如果不进行更改，它将是：

$urlRouterProvider.otherwise('/profiles/profiles/calendar');

还有另一种设置：

Absolute Routes (^) （来自doc的小引用和代码片段）

如果您想要绝对网址匹配，则需要在网址字符串前加上一个特殊符号'^'。

代码段：

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

所以第三个解决方案是：

.state('profiles.calendar', {
    url: '^/profiles/calendar', // see the leading sign

但我想我在plunker中展示的网址缩短是最好的方式......

ui.router命名视图不起作用

1 个答案: