如何使用UI的路由器仅更新命名视图 [英] How to update only the named view using UI-Router
问题描述
我创建一个Web应用程序，以帮助学生在科学，历史和数学。当您在网站我有一个家/登陆页面上的第一个土地。当您单击开始我的路线/考试/指令。我的每一个步骤的指示，数学和科学我们的模板，我加载到用户界面视图=考试细节的。目前整个用户界面视图加载，当我浏览，并从通过科学的说明。理想情况下，我只是想为分页和区域为主题的区域，只希望用户界面视图=考试细节与正确的模板进行更新。
我没有使用在所有的UI路由器和任何援助将大大AP preciated。
index.html的
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
国家考试> exam.html
＆LT; DIV CLASS =国家考试＆GT;
＆LT;导航界面视图=应试分页＆GT;＆LT; / NAV＆GT;
＆lt;节UI视图=考试细节＆GT;＆LT; /节＆gt;
＆LT; / DIV＆GT;
route.js
（函数（）{
使用严格的;角
.module（'studentPortal'）
的.config（routeConfig）;功能routeConfig（$ stateProvider，$ urlRouterProvider）{
$ stateProvider
.STATE（'家'，{
网址：'/'，
templateUrl：应用程序/主/ main.html中，
控制器：'MainController'，
controllerAs：'主'
}） .STATE（'考试'，{
网址：'/检查/：步'，
摘要：真实，
templateUrl：应用程序/国家考试/ exam.html'，
控制器：'ExamController'，
controllerAs：examController'，
}） .STATE（'exam.instructions'，{
网址：'/指令，
观点：{
应试分页：{
templateUrl：应用程序/国家考试/考试-pagination.html
}，
考试细节：{
templateUrl：应用程序/国家考试/考试-instructions.html
}
}
}） .STATE（'exam.math'，{
网址：'/数学，
观点：{
应试分页：{
templateUrl：应用程序/国家考试/考试-pagination.html
}，
考试细节：{
templateUrl：应用程序/国家考试/考试-math.html
}
}
}）;
$ urlRouterProvider.otherwise（'/'）;
}}）（）;
有
有一个类似的问答集A有其实用工作plunker：
角UI路由器 - 嵌套国多种布局
下面的解决方案，是对的静态的观点摆脱孩子的父母。它不会重载为每个孩子的（查看被重载仅当父状态被改变）的。我们将使用绝对命名的（详情请参阅包括链接）的
因此，这是code调整
.STATE（'考试'，{
网址：'/检查/：步'，
摘要：真实，
//根视图和静态视图分页
//将在这里定义的，所以我们需要的观点：{}
观点：{
''：{
templateUrl：应用程序/国家考试/ exam.html'，
控制器：'ExamController'，
controllerAs：examController'，
}，
//命名绝对以上的目标定义的视图
应试分页@考试：{
templateUrl：应用程序/国家考试/考试-pagination.html
}，
}
}） .STATE（'exam.instructions'，{
网址：'/指令，
观点：{
//'应试分页：{} //父定义
考试细节：{
templateUrl：应用程序/国家考试/考试-instructions.html
}
}
}） .STATE（'exam.math'，{
网址：'/数学，
观点：{
//'应试分页：{} //父定义
考试细节：{
templateUrl：应用程序/国家考试/考试-math.html
}
}
}）;
另外，请查阅本，以获取有关绝对鉴于命名的更多详细信息。
借助工作的例子是这里
I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.
I have not used UI-Router at all and any assistance would be greatly appreciated.
index.html
<div ui-view></div>
state-exam>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('/');
}
})();
There is a working plunker
There is a similar Q & A in fact, with working plunker:
Angular UI Router - Nested States with multiple layouts
Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)
So this is the code adjustment
.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'
}
}
});
Also check this to get more details about absolute view naming
这篇关于如何使用UI的路由器仅更新命名视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
