Question

我正在创建一个网络应用程序来帮助学生学习科学，历史和数学。当您第一次登陆网站时，我有一个家/登陆页面。点击开始后，我将路由到/考试/说明。我的每个步骤说明，数学和科学都是我加载到ui-view="exam-detail"的模板。目前，当我通过科学导航和指导时，整个ui-view会加载。理想情况下，我只想要一个分页区域和主题区域，只希望ui-view="exam-detail"更新正确的模板。

我根本没有使用过UI-Router，非常感谢任何帮助。

的index.html

<div ui-view></div>

状态考试＆GT; exam.html

<div class="state-exam">
    <nav ui-view="exam-pagination"></nav>
    <section ui-view="exam-detail"></section>
</div>

route.js

(function() {
'use strict';

angular
.module('studentPortal')
.config(routeConfig);

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })

  .state('exam', {
    url: '/exam/:step',
    abstract: true,
    templateUrl: 'app/state-exam/exam.html',
    controller: 'ExamController',
    controllerAs: 'examController',
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      'exam-pagination':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });
  $urlRouterProvider.otherwise('/');
  }

})();

Answer 1

有a working plunker

有一个类似的Q＆amp;事实上，有工作的plunker：

Angular UI Router - Nested States with multiple layouts

这里的解决方案是将静态视图从子视图移动到父视图。它不会为每个孩子重新加载（仅当父状态被更改时才重新加载视图）。我们将使用绝对命名（有关详情，请参阅附带的链接）

所以这是代码调整

  String modifyDate;
  Date date = new Date(a.lastModifiedTime().to(TimeUnit.MILLISECONDS));
  DateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
  format.setTimeZone(TimeZone.getDefault());
  modifyDate = (format.format(date)).substring(0,10);

同时选中此项以获取有关绝对视图命名的更多详细信息

working example is here

如何使用UI-Router

1 个答案:

Angular UI Router - Nested States with multiple layouts