0
我需要在同一视图中有3个元素，我不知道该怎么做，我有我的ui-view ='main'，我可以显示我的菜单，但我不知道如何在同一视图中显示模板选择的菜单几个元素在相同的UI视图angularjs
这是我的路由
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider){
$stateProvider
.state("connexion", {
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state("accueil", {
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state('agenda', {
url: "/agenda",
views: {
// for column two, we'll define a separate controller
'': {
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve:{
"check":function($cookies,$location){ //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')){ //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
}else{
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
},
'main':{
url: "/menu",
templateUrl: 'Template/menuAddAgenda.html'
/* //i want to put here
("bar", {
url: "/bar",
templateUrl: 'Template/bar.html'
})
("foo", {
url: "/bar",
templateUrl: 'Template/foo.html'
})
*/
}
}
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
这是我的模态代码
<div class="modal-body" id="modal-body">
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view="main"></div>
</div>
</div>
<div ng-view></div>
，这我的代码菜单
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="foo">Route 1</a></li>
<li><a ui-sref="bar">Route 2</a></li>
</ul>
</div>
我的菜单显示正确，但我不知道如何设置我的UI-SREF显示在同一个视图
如果有一个人能帮助我
thans提前
路线编辑
我试着用这个，但它并没有与此错误错误工作：无法从STA解决“酒吧”“ TE“议程”
.state('bar', {
url: '/bar',
views: {
'[email protected]': {
abstract :true,
template: '<h1>bar</h1>'
}
}
})
，并与该效果很好，我NG-视图=“主”，但没有窗口模式背后的名字我第一次NG-视野中消失
.state("bar", {
url: "/bar",
views: {
'main':{
template: '<h1>bar</h1>'
}
}
})
和当把父母不工作再次
.state("bar", {
url: "/bar",
parent:'agenda',
views: {
'main':{
template: '<h1>bar</h1>'
}
}
})
RE编辑
我阅读文档，我看到这个
之前使用1.2.0 .setNestedState而不是.state。在1.2.0 setNestedState被弃用，取而代之的.STATE的，
所以我有这样的一个
我需要查看但是NT工作
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){
stateHelperProvider
.state({
name: "connexion",
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name: "accueil",
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name:'agenda',
url: "/agenda",
children: [
{
views: {
// for column two, we'll define a separate controller
'': {
abstract: true,
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve: {
"check": function ($cookies, $location) { //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')) { //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
} else {
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
},
'main': {
abstract: true,
templateUrl: 'Template/menuAddAgenda.html',
children:[
{
name:'foo',
abstract: true,
template: '<h1>foo</h1>'
},
{
name:'bar',
abstract: true,
template: '<h1>bar</h1>'
}
]
}
}
}]
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
})
但这个工程视图=“” ，但不能用于视图= '主'
routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){
stateHelperProvider
.state({
name: "connexion",
url: "/connexion",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name: "accueil",
url: "/",
templateUrl: 'Template/connexion.html',
controller: 'PostController'
})
.state({
name:'agenda',
url: "/agenda",
views: {
// for column two, we'll define a separate controller
'': {
abstract: true,
templateUrl: 'Template/agenda.html',
controller: 'customersCtrl',
resolve: {
"check": function ($cookies, $location) { //function to be resolved, accessFac and $location Injected
// console.log($cookies.get('user'));
if ($cookies.get('user')) { //check if the user has permission -- This happens before the page loads
// $cookies.remove('user');
} else {
$location.path('/'); //redirect user to home if it does not have permission.
alert("Vous devez vous connecter pour acceder a cette page");
}
}
}
}
},
children: [
{
views:{
'main': {
abstract: true,
templateUrl: 'Template/menuAddAgenda.html'
},
'foo': {
abstract: true,
template: '<h1>foo</h1>'
},
'bar': {
abstract: true,
template: '<h1>bar</h1>'
}
}
}]
})
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
})
我创建plunker
https://plnkr.co/edit/Zyrj3gRv1cGZpcWwhXfL?p=preview
但我有这个plunker一个问题，因为我的菜单必须在模态（查看=“主”），而不是外部的其他视图=“”
我测试，但我不uderstand为什么它不工作，请检查我的编辑 – Gazano
无解??? – Gazano
@Gazano我编辑了我的答案，检查这 – Akashii