AngularJS

Question

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

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

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

这里是 link 的 plunker 制作:: http://plnkr.co/edit/TWCQuoIyJRvTb42Z7xxe?p=preview

如您所见，'papers' 主状态正在加载。然而，来自命名视图的 none 内容正在从其 child 状态 '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>

Answer 1

一种解决方法是添加两行：

将您的 parent 更改为 abstract : true 和
强制child定义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' 到 child state:

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

勾选这个version here

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

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

javascript

view

named

angular-ui-router