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

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

javascript angularjs view

Javascript AngularJS-在子状态中加载命名视图（非抽象）,javascript,angularjs,view,angular-ui-router,named,Javascript,Angularjs,View,Angular Ui Router,Named,好吧，我的命名视图在将内容加载到我的状态时遇到了问题它主要是有问题的，因为我真的不知道为什么它不工作；对于angular，这通常意味着输入错误，但我在plunker中重新创建了我的问题，并且得到了相同的结果，所以可能我遗漏了一些东西我知道以前有人问过这个问题：：但是我在这里看到的所有结果都是人们把内容放到抽象状态的孩子身上。我想做的是拥有一个国家；使用命名视图以及与该状态相关的其他内容填充它；然后让该状态的子级将内容加载到名为视图的主状态中。应该足够简单，而且相当直截了当，但唉，我的不适合我

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

它主要是有问题的，因为我真的不知道为什么它不工作；对于angular，这通常意味着输入错误，但我在plunker中重新创建了我的问题，并且得到了相同的结果，所以可能我遗漏了一些东西

我知道以前有人问过这个问题：：但是我在这里看到的所有结果都是人们把内容放到抽象状态的孩子身上。我想做的是拥有一个国家；使用命名视图以及与该状态相关的其他内容填充它；然后让该状态的子级将内容加载到名为视图的主状态中。应该足够简单，而且相当直截了当，但唉，我的不适合我

这是指向plunker的链接：：

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

参考代码：

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

<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>

索引页（此处加载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>

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

<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:''
```

有，这是更新的状态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'
        }
      }
  })

有关详细信息，请参阅文档：

<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>

检查一下

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

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

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

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

检查这个

hm，这是我主应用程序的一个子部分，所以更改$urlRouteProvider是不行的。但是第一个答案我会试一试。我认为只要有命名视图，就可以将子状态加载到非抽象父级，但我认为angular ui router不是这样工作的，谢谢您的反馈！一旦我发现它起作用，我就试一试，把你作为答案；太完美了。我不知道有人可以将模板加载到摘要中。所以这正是我想要的。很高兴看到这一点；）享受强大的UI路由器，很棒的工具