html 部分未加载到 ui-view [英] html partial is not loaded into ui-view
问题描述
我在 plunker 上发布了一个示例:
http://plnkr.co/edit/aOOlXOUIUQTARb8D7jNR?p=preview
我的浏览器控制台没有错误.
我希望当我通过按下按钮下方显示视图 html 的相应按钮来切换日/周/月视图时.但事实并非如此.
原因可能是因为代码中没有命中 day 、 week 和 month 控制器.
所以我的问题是为什么没有加载控制器或者没有用真正的 html 部分替换 ui-view.
因为我不知道真正的原因，所以我不得不问这两种情况.
'use strict';有角的.module('日期', ['ui.router']).run(['$rootScope', '$state', '$stateParams',函数($rootScope，$state，$stateParams){$rootScope.$state = $state;$rootScope.$stateParams = $stateParams;}]).config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/dateplanner/day');$stateProvider.state('日期', {url: '/dateplanner',摘要:真实，意见:{'菜单@': {templateUrl: 'menu.html'},'内容@': {templateUrl: 'dateplanner.html',控制器:'DateplannerController'}}}).state('dates.day', {网址:'/天'，意见:{'计划者@':{templateUrl: 'dateplannerday.html',控制器:'DateplannerDayController'}}}).state('dates.week', {网址:'/周'，意见:{'计划者@':{templateUrl: 'dateplanner.week.html',控制器:'DateplannerWeekController'}}}).state('dates.month', {网址:'/月'，意见:{'计划者@':{templateUrl: 'dateplanner.month.html',控制器:'DateplannerMonthController'}}})});MENU.HTML
<li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active"><a ui-sref="dates.day">日期计划器</a>
DATEPLANNER.HTML
<button ui-sref="dates.day" ui-sref-active="btn-primary" type="button" class="btn btn-default">Day</button><button ui-sref="dates.week" ui-sref-active="btn-primary" type="button" class="btn btn-default">周</button><button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">月</button><div style="background:white;"ui-view="计划员">正在加载...</div>
正如我们在这里讨论的那样:
该问题与以下内容有关:
在我们的例子中，我们可以通过扩展子状态(日、周、月).他们的视图名称以绝对视图名称为目标:
.state('dates.day', {网址:'/天'，意见:{'计划者@日期':{...}}}).state('dates.week', {网址:'/周'，意见:{'计划者@日期':{...}}}).state('dates.month', {网址:'/月'，意见:{'计划者@日期':{...}}因为这些视图目标处于 dates 状态，我们在分隔符 @ 之后添加它的名称，即planner@dates".另外，因为这个状态是所有这些状态的父状态，我们可以跳过它.父状态在幕后由 ui-router 为我们注入.更多解释:
在幕后，每个视图都被分配一个绝对名称，遵循 viewname@statename 方案，其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称，例如联系方式.您还可以选择以绝对语法编写视图名称.
快速概览
放置在
index.html中的ui-view="content"正在获取绝对名称content@".分隔符是@，状态是根表示为".(字符串为空).IE.viewname@statename ===`内容@"孩子可以像planner@dates"一样定位父母的日期或计划者".他们也可以像content@"这样的根目录
I have posted a sample on plunker:
http://plnkr.co/edit/aOOlXOUIUQTARb8D7jNR?p=preview
I get no errors in my browser console.
I want that when I switch the day/week/month views by pressing the according button that below the buttons the html for the view is shown. But that happens not.
The reason might because the day , week and month controllers are not hit in the code whyever that is.
So my question is why are the controllers not loaded or the ui-view not replaced with the real html partial.
As I do not know the real cause I have to ask for both cases.
'use strict';
angular
.module('dates', ['ui.router'])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dateplanner/day');
$stateProvider
.state('dates', {
url: '/dateplanner',
abstract: true,
views: {
'menu@': {
templateUrl: 'menu.html'
},
'content@': {
templateUrl: 'dateplanner.html',
controller: 'DateplannerController'
}
}
})
.state('dates.day', {
url: '/day',
views: {
'planner@': {
templateUrl: 'dateplannerday.html',
controller: 'DateplannerDayController'
}
}
})
.state('dates.week', {
url: '/week',
views: {
'planner@': {
templateUrl: 'dateplanner.week.html',
controller: 'DateplannerWeekController'
}
}
})
.state('dates.month', {
url: '/month',
views: {
'planner@': {
templateUrl: 'dateplanner.month.html',
controller: 'DateplannerMonthController'
}
}
})
});
MENU.HTML
<ul>
<li ng-class="{ activeButton: $state.includes('dates') }" ui-sref-active="active">
<a ui-sref="dates.day">date planner</a>
</li>
</ul>
DATEPLANNER.HTML
<div class="btn-group">
<button ui-sref="dates.day" ui-sref-active="btn-primary" type="button" class="btn btn-default">Day</button>
<button ui-sref="dates.week" ui-sref-active="btn-primary" type="button" class="btn btn-default">Week</button>
<button ui-sref="dates.month" ui-sref-active="btn-primary" type="button" class="btn btn-default">Month</button>
</div>
<div style="background:white;" ui-view="planner">
Loading...</div>
As we've discussed it here:
the issue is related to the:
In our case, we can fix this example by extending the child states (day, week, month) resp. their view names to be targeting the absolute view names target:
.state('dates.day', {
url: '/day',
views: {
'planner@dates': {
...
}
}
})
.state('dates.week', {
url: '/week',
views: {
'planner@dates': {
...
}
}
})
.state('dates.month', {
url: '/month',
views: {
'planner@dates': {
...
}
}
Because these views target is in the state dates we are adding its name after delimiter @, i.e. 'planner@dates'. Also, because this state is parent of all of them, we can skip it. Parent state is behind the scene injected for us by ui-router. Some more explanation:
Behind the scenes, every view gets assigned an absolute name that follows a scheme of
viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
Quick overview
The
ui-view="content"placed inindex.htmlis getting the absolute name "content@". The delimiter is@and state is root represented as "" (string empty). I.e. viewname@statename ===`"content@"The dates children can target parent like "planner@dates" or "planner". They also can target root like "content@"
这篇关于html 部分未加载到 ui-view的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
