我必须创建一个包含固定顶部菜单的页面,其中包含一些输入和按钮。
根据填写的数据和按下的按钮,菜单下方会显示包含数据的地图。
菜单将始终存在,只会更新地图。
ROUTE
$stateProvider
.state('login', {
url : '/login',
templateUrl : 'app/login/login.html',
controller : 'LoginController'
})
.state('home', {
url : '/home',
templateUrl : 'app/home/home.html'
})
.state('menu', {
url : '',
templateUrl : 'app/menu/menu.html',
parent : 'home'
});
home.html的
<div ui-view="menu"></div>
<h1 class="ui huge header">
Please select something
</h1>
目前我只能看到“请选择一些东西”但不能看到菜单。
之后,我如何用所需的地图替换“请选择一些东西”?是否可以拥有默认视图?登陆家庭时我应该看到消息而不是地图
修改 这是我在答案后得到的内容
ROUTE
$stateProvider
.state('login', {
url : '/login',
views : {
'login' : {
templateUrl : 'app/login/login.html',
controller : 'LoginController'
}
}
})
.state('home', {
url : '/home',
views : {
'menu' : {
templateUrl : 'app/menu/menu.html'
},
'content' : {
templateUrl : 'app/home/home.html',
}
}
})
.state('home.other', {
url : '/other',
views : {
'content@' : {
templateUrl : 'app/home/home.html'
}
}
});
INDEX.HTML
<div ui-view="login"></div>
<div ui-view="menu"></div>
<div ui-view="content"></div>
它运作良好,但这是最好的方法吗?我有很多不同的内容,所以我必须在每个州内复制菜单视图?
如果我的网页布局不同(没有菜单和内容) - 我应该在<div ui-view="list"></div>
中添加新的index.html
吗?
答案 0 :(得分:1)
已编辑
尝试阅读本文的Nested views以更好地了解ui-router中的现有解决方案。
以下是您可以采取的措施,以避免重复路由:
$stateProvider
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'app/login/login.html',
controller: 'LoginController'
}
}
})
.state('menu', {
url: '/menu',
templateUrl: 'app/menu/menu.html'
})
.state('menu.content', {
views: {
'default': {
url: '/default',
template: '<h1>Please select something</h1>'
},
'content1': {
url: '/content1',
templateUrl: 'app/content1/content1.html'
},
'content2': {
url: '/content2',
templateUrl: 'app/content2/content2.html'
}
}
});
您可以清楚地看到从网址中阅读和理解内部和内部的内容。如果您有网址menu/content1
- 您菜单下的意思是内容1现在可见。
答案 1 :(得分:1)
您不必为菜单定义另一个状态,只需将其添加到您的家乡状态作为另一个视图。喜欢这个
.state('home', {
url: '/home',
views:{
'menu': {
templateUrl: 'app/menu/menu.html'
},
'home': {
templateUrl: 'app/home/home.html'
}
}
})
并将您的HTML更改为:
<div ui-view="menu"></div>
<div ui-view="home"></div>
每当您想要更新视图(保持菜单相同)时,为此视图创建一个状态,如下所示:
.state('home.newState', {
url: '/newState',
views:{
'home@':{
templateUrl: 'app/home/newState.html'
}
}
})
这将通过添加newState.html模板代替home.html模板来更新视图,同时保持菜单相同。