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

AngularJS - Loading named views within child states ( not abstract )

本文关键字：视图 抽象 状态 加载 AngularJS-      更新时间：2023-09-26

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

它主要有问题，因为我真的不知道为什么它不起作用；angular通常意味着拼写错误，但我在一个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>

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

  • 将您的父母更改为abstract : true，然后
  • 强制子级定义url : ''

存在一个已更新且正在工作的plunker，这是更新的状态定义：

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

有关这方面的更多详细信息，请参阅文档：

如何：设置默认/索引子状态

在这里查看

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

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

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

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

在此处检查此版本

相关文章：