如何使用UI-Router仅更新命名视图
我正在创建一个网络应用程序，以帮助学生在科学，历史和数学。 当你第一次登陆网站时，我有一个家/登陆页面。 点击开始后，我将路由到/考试/说明。 我的每个步骤说明，数学和科学都是我加载到ui-view="exam-detail"模板。 目前，当我通过科学导航和指导时，整个ui-view会加载。 理想情况下，我只想要一个用于分页的区域和一个主题区域，并且只希望用正确的模板更新ui-view="exam-detail" 。
我根本没有使用UI-Router，非常感谢任何帮助。
的index.html
状态考试> exam.html
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('/'); } })();
有一个工作的plunker
事实上，有一个类似的问答，有工作的plunker：
Angular UI路由器 – 具有多个布局的嵌套状态
这里的解决方案是将静态视图从子移动到父级。 它不会为每个子节点重新加载（只有在更改父节点状态时才会重新加载视图） 。 我们将使用绝对命名（有关详细信息，请参阅包含的链接）
所以这是代码调整
.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路由器嵌套视图
- Angular-UI路由器：嵌套视图不起作用
工作的例子在这里