如何使用多个命名的 ui-views

Question

我在配置文件中有以下状态：

var home = {
   name: 'home',
   template: '<div ui-view></div>',
   url: '/',
};

var homeSubjects = {
   name: 'home.subjects',
   url: 'Subjects',
   views: {
      '': { templateUrl: 'app/subjects/partials/subjects.html' },
      'subjects.intro@home.subjects': {
         templateUrl: 'app/subjects/partials/subjects_intro.html',
      },
      'subjects.auth@home.subjects': {
         templateUrl: 'app/subjects/partials/subjects_auth.html',
      }
  }
};

var homeSubjectsSubjectExams = {
   name: 'home.subjects.exams',
   url: '/Exams',
   views: {
      '': { templateUrl: 'app/exams/partials/exams.html'},
      'exams.intro@home.subjects.exams': {
         templateUrl: 'app/exams/partials/exams_intro.html',
      },
      'exams.auth@home.subjects.exams': {
         templateUrl: 'app/exams/partials/exams_auth.html',
      },
   }
}

在我的 index.html 文件中，我有以下代码：

<div ui-view></div>

在subjects.html我有：

<div id="subject">
   <div class="intro" ui-view="subjects.intro"></div>
   <div class="auth" ui-view="subjects.auth"></div>
</div>
<div ui-view></div> // <--- I want the exams.html to appear here

在我的 exams.html 我有：

<div id="exams">
    <div class="intro" ui-view="exams.intro"></div>
    <div class="auth" ui-view="exams.auth"></div>
</div>

我希望 exams.html 显示在 subject.html 页面下方。有人知道我应该怎么做吗？

Answer 1

你应该快到了。这个例子是有效的。

有 a plunker with that 全部 - 按原样。

我几乎没有做任何更改（只是使用模板而不是 templateUrl 以使其更简单）:

.state('home.subjects', {
    name: 'home.subjects',
    url: 'Subjects',
    views: {
      '': {
        templateUrl: 'app/subjects/partials/subjects.html'
      },
      'subjects.intro@home.subjects': {
        //templateUrl: 'app/subjects/partials/subjects_intro.html',
        template: 'app/subjects/partials/subjects_intro.html',
      },
      'subjects.auth@home.subjects': {
        //templateUrl: 'app/subjects/partials/subjects_auth.html',
        template: 'app/subjects/partials/subjects_auth.html',
      }
    }
})

.state('home.subjects.exams', {
  name: 'home.subjects.exams',
  url: '/Exams',
  views: {
    '': {
      templateUrl: 'app/exams/partials/exams.html'
    },
    'exams.intro@home.subjects.exams': {
      //templateUrl: 'app/exams/partials/exams_intro.html',
      template: 'app/exams/partials/exams_intro.html',
    },
    'exams.auth@home.subjects.exams': {
      //templateUrl: 'app/exams/partials/exams_auth.html',
      template: 'app/exams/partials/exams_auth.html',
    },
  }
})

如果我们转到 <a ui-sref="home.subjects.exams">

，这就是结果

app/subjects/partials/subjects_intro.html
app/subjects/partials/subjects_auth.html
app/exams/partials/exams_intro.html
app/exams/partials/exams_auth.html

我们可以看到，home.subjects在页面上，下方注入了exams子状态

检查一下here

如何使用多个命名的 ui-views

How to use multiple named ui-views

state

nested

angularjs

angular-ui-router