Question

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

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

我知道之前已经问过这个问题:: 但是在我看到的所有结果中，人们都把内容放入抽象状态的孩子们。我想做的是拥有一个国家;使用命名视图以及与该状态相关的其他内容填充它;然后让那些状态的孩子将内容加载到命名视图的主要状态。应该足够简单而且相当直接但是我的不适合我。

以下是plunker制作的链接:: http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview

因为你会看到主要的'论文'状态正在加载。但是，命名视图中的所有内容都没有从其子状态“papers.views”加载到“论文”状态。

参考代码：

模块声明和状态配置（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>

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

文档中有关此内容的更多详细信息：

<强> How to: Set up a default/index child state

检查here

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

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

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

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

选中此version here

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

1 个答案: