如何使用 UI-Router 仅更新命名视图

我正在创建一个网络应用程序来帮助学生学习科学、历史和数学。当您第一次登陆该网站时，我有一个主页/登陆页面。当您单击“开始”时，我会转到/exam/instructions。我的每个步骤都说明了我加载到的模板中的数学和科学ui-view="exam-detail"。目前全ui-view当我通过科学导航来回浏览指令时加载。理想情况下，我只想要一个分页区域和一个主题区域，并且只想要ui-view="exam-detail"使用正确的模板进行更新。

我根本没有使用过 UI-Router，任何帮助将不胜感激。

索引.html

<div ui-view></div>

状态考试>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('/');
  }

})();

有一个工作的笨蛋 http://plnkr.co/edit/aR3cdYrDEY7FJvhLPRCj?p=preview

事实上，对于工作中的笨蛋来说，也有类似的问答：

Angular UI Router - 具有多种布局的嵌套状态 https://stackoverflow.com/q/25667660/1679310

这里的解决方案是移动static从孩子到父母的视角。不会为每个孩子重新加载（仅当父状态更改时才会重新加载视图）。我们将使用absolute naming （有关更多详细信息，请参阅包含的链接）

这就是代码调整

.state('exam', {
    url: '/exam/:step',
    abstract: true,
    // the root view and the static pagination view
    // will be defined here, so we need views : {}
    views: {
      '':{
        templateUrl: 'app/state-exam/exam.html',
        controller: 'ExamController',
        controllerAs: 'examController',
      },
      // absolute naming targets the view defined above
      'exam-pagination@exam':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
    }
  })

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

  .state('exam.math', {
    url: '/math',
    views: {
      // 'exam-pagination':{}, // defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });

另请检查此以获取有关绝对视图命名的更多详细信息

• Angular UI 路由器嵌套视图 https://stackoverflow.com/q/25587280/1679310
• Angular-UI 路由器：嵌套视图不起作用 https://stackoverflow.com/q/29585103/1679310

The 工作示例在这里 http://plnkr.co/edit/aR3cdYrDEY7FJvhLPRCj?p=preview