角-UI-路由器，嵌套命名的观点 - 我究竟做错了什么？ [英] Angular-Ui-Router, nested named views - what am I doing wrong?
问题描述
我想用用UI路由器嵌套命名视图实现一个很简单的例子，我无法得到它的工作。如果任何人都可以看这个的jsfiddle - http://jsfiddle.net/thardy/eD3MU/ - 和告诉我，我做错了，我会非常AP preciate它。
I'm trying to implement a very simple example using nested named views using ui-router, and I can't get it to work. If anyone could look at this jsFiddle - http://jsfiddle.net/thardy/eD3MU/ - and tell me what I'm doing wrong, I'd greatly appreciate it.
的基本思想是：
- 我的index.html有一个单一的用户界面视图
- 这被连接到有两个模板，命名为UI的意见
- 我想设置的配置来填充模板，这两种UI的意见，我不能让它的工作。
The basic idea is this: - My index.html has a single ui-view - The template that gets plugged into that has two, named ui-views - I'm trying to setup the configuration to populate these two ui-views with templates and I can't get it to work
这是小提琴的（尖括号模板用[]取代）的核心是：
This is the core of the fiddle (angle brackets in template replaced with []):
$stateProvider
.state('test', {
url: '/test',
views: {
'main': {
template: '[h1]Hello!!![/h1]' +
'[div ui-view="view1"][/div]' +
'[div ui-view="view2"][/div]'
}
}
})
.state('test.subs', {
url: '',
views: {
'view1': {
template: "Im View1"
},
'view2': {
template: "Im View2"
}
}
});
我已经调整了它几个小时，现在很多（想绝对名称等），我快要发疯了。它根据文档（至少对我来说）看起来不错，但没有任何简单的例子，我必须缺少明显的东西。
I've tweaked it a alot for several hours now (trying absolute names, etc), and I'm about to go crazy. It looks good according to the documentation (at least to me), but there aren't any simple examples, and I must be missing something obvious.
更新
通过从测试状态中移除该网址并加入网址：''到test.subs状态，它的工作原理。但添加任何URL测试状态导致它再次失败。在我的现实世界中的场景，没有这些国家都处于根，无网址父状态都导致事情无法正常工作。这就像那个状态未启动或什么的。根据文档，其网址：。''在子应该导致其连同它的父状态被激活，但是这不是发生了什么。
Update By removing the url from test state and adding url: '' to the test.subs state, it works. But adding any url to test state causes it to fail again. In my real world scenario, none of these states are at the root, and having no url at all in the parent state causes things to not work well. It's like that state isn't activated or something. According to the docs, having url: '' in the sub should cause it to be activated along with it's parent state, but that's not what is happening.
更新 - 解决方案
对于任何想谁看到它 - http://jsfiddle.net/thardy/eD3MU/
推荐答案
在上面code两个问题：
two issues in above code:
-
由于kju建议
摘要：真实，
这是抽象的国家将永远不会被直接激活，但可提供
继承属性，将其共同的孩子的状态。
An abstract state will never be directly activated, but can provide inherited properties to its common children states.
添加 URL：在 test.sub 状态
使用一个空的URL意味着这个孩子的状态会变得活跃时
其母公司的网址导航到。
Using an empty url means that this child state will become active when its parent's url is navigated to.
不要手工过渡到测试
见下文code：
angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state('test', {
abstract: true,
url: '',
views: {
'main': {
template: '<h1>Hello!!!</h1>' +
'<div ui-view="view1"></div>' +
'<div ui-view="view2"></div>'
}
}
})
.state('test.subs', {
url: '',
views: {
'view1': {
template: "Im View1"
},
'view2': {
template: "Im View2"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
// $state.transitionTo('test');
}]);
这篇关于角-UI-路由器，嵌套命名的观点 - 我究竟做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
