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