ui.router 命名视图不起作用答案

【问题标题】：ui.router named views not workingui.router 命名视图不起作用
【发布时间】：2014-10-14 18:22:37
【问题描述】：

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

.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

【问题讨论】：

标签： angularjs angularjs-routing angular-ui-router

【解决方案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 的代码 sn-p:)

如果你想进行绝对 url 匹配，那么你需要在你的 url 字符串前面加上一个特殊符号 '^'。

代码sn-p：

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

所以第三个解决方案是：

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

但我想我在plunker 中显示的 url 缩短是最好的方法......

【讨论】：