AngularJS - 在子状态中加载命名视图（非抽象）答案

【问题标题】：AngularJS - Loading named views within child states ( not abstract )AngularJS - 在子状态中加载命名视图（非抽象）
【发布时间】：2015-03-02 19:32:57
【问题描述】：

好的，我的命名视图将内容加载到我的状态时遇到问题。

这主要是有问题的，因为我真的不知道为什么它不起作用；角度通常意味着一个错字，但我已经在一个 plunker 中重新创建了我的问题并且得到了相同的结果，所以也许我遗漏了一些东西。

我知道以前有人问过这个问题:: 但是在我在这里看到的所有结果中，人们都在将内容放入抽象状态的子项中。我想做的是有一个状态；使用命名视图以及与该状态相关的其他内容填充它；然后让该州的孩子将内容加载到名为视图的主要州中。应该足够简单而且相当直接，但可惜我的对我不起作用。

这里是 plunker 的链接:: http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview

您将看到主要的“论文”状态正在加载。但是，命名视图中的任何内容都不会从其子状态“papers.views”加载到“papers”状态。

参考代码：

模块声明和状态配置（app.js）

var app = angular.module( 'app', [ 'ui.router' ] );

app.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise('/papers');
      // States
      $stateProvider
      .state( 'papers',  {
          url: "/papers",
          templateUrl: 'papers.html'
      }) // nested paper state + views
      .state( 'papers.views', {
          views: {
            '@papers': {
              templateUrl: 'papers.home.html'
            },
            'paper1@papers': {
              templateUrl: 'papers.paper1.html'
            },
            'paper2@papers': {
              templateUrl: 'papers.paper2.html'
            }
          }
      })
    }
])
.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

索引页面（papers.html 在此处加载）：

<body>
    <div ui-view></div>
</body>

论文页面（应该加载嵌套视图）

<h1>This is the papers page. other views should load in here</h1>

<div ui-view ></div>
<div ui-view="paper1" ></div>
<div ui-view="paper2" ></div>

【问题讨论】：

标签： javascript angularjs view angular-ui-router named

【解决方案1】：

一种方法，解决这个问题的方法是添加两行：

将你的父母改为abstract : true和
强制孩子定义url : ''

有an upated and working plunker，这是更新后的状态def：

  $urlRouterProvider.otherwise('/papers');
  // States
  $stateProvider
  .state( 'papers',  {
      // NEW LINE
      abstract: true,
      url: "/papers",
      templateUrl: 'papers.html'
  }) // nested paper state + views
  .state( 'papers.views', {
      // NEW LINE - because parent is abstract, same url here - this will be loaded
      url: '',
      views: {
        '@papers': {
          templateUrl: 'papers.home.html'
        },
        'paper1@papers': {
          templateUrl: 'papers.paper1.html'
        },
        'paper2@papers': {
          templateUrl: 'papers.paper2.html'
        }
      }
  })

查看here

另一种方法是更改默认值：

$urlRouterProvider.otherwise('/papers/view');

并将 url: '/view' 添加到子状态：

  ...
  .state( 'papers.views', {
      url: '/view',
      views: {
      ...

检查这个version here

【讨论】：

hm，这是我的主应用程序的一个子部分，所以更改 $urlRouteProvider 不会做。但第一个答案我会试一试。我认为只要有一个命名视图就可以将子状态加载到非抽象父级中，但我想这不是 angular-ui-router 的工作方式，感谢您的反馈！一旦我发现它有效，我会试一试并将你标记为答案
检查了；这是完美的。我不知道可以将模板加载到摘要中。所以这正是我想要的。
很高兴看到这一点 ;) 享受强大的 UI-Router，很棒的工具