[英]AngularJS routing multiple ui-views for the same URL?
一个URL
(我的首页)需要多个ui-views
。 ui-routing
的限制是我不能有多个<div ui-view></div>
但是它们必须处于嵌套状态。
<div class="left-div">
<div ui-view></div>
<button ui-sref="1"></button>
<button ui-sref="2"></button>
<button ui-sref="3"></button>
</div>
<div class="right-div">
<button ui-sref="3"></button>
<div ui-view></div>
</div>
如何使ui-sref=1
和ui-sref=2
能够更新其中的ui-view
:
<div class="left-div"></div>
ui-sref = 3将更新<div class="right-div"></div>
的ui-view
使用ui-router时遇到的问题是,从ui-sref
从1 -> 3
或2 -> 3
更改后, left-div
的ui-view
将消失,因为URL
更改了。
我该如何处理?
编辑-我当前的状态视图
chatApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home') $stateProvider .state('friend', { url: '/friend', templateUrl: 'friend.html' }) .state('group', { url: '/group', templateUrl: 'group.html' }) .state('search', { url: '/search', templateUrl: 'search.html' }) .state('home', { url: '/search', templateUrl: 'search.html' }) .state('public', { url: '/public', views: { 'publicView': { templateUrl: 'private-chat.html' } } });
<div class="col-md-3 left-col-friends" ng-controller="friendListCtrl"> <div class="friends-list-navigation"> <div class="option-wrapper"> <div class="col-xs-3 home-option" ui-sref="public"><i class="fa fa-home fa-2x"></i></div> <div class="col-xs-3 friend-option" ui-sref="friend"><i class="fa fa-user fa-2x"></i></div> <div class="col-xs-3 group-option" ui-sref="group"><i class="fa fa-users fa-2x"></i></div> <div class="col-xs-3 search-option" ui-sref="search"><i class="fa fa-search fa-2x"></i></div> </div> </div> <div class="friends-list-display"> <div ui-view></div> </div> </div> <div class="col-md-9 middle-col-chat" ng-controller="publicCtrl"> <div class="bubble-frame-public"> <div ui-view="publicView"></div> </div> <div class="input-fields-wrapper" emoji-form emoji-message="emojiMessage"> <div class="col-md-8"> <textarea class="col-md-4" id="messageInput" ng-model="emojiMessage.messagetext"></textarea> </div> <div class="col-md-3"> <button class="btn btn-default btn-send-public-msg" ng-click="emojiMessage.replyToUser()"><i class="fa fa-paper-plane"></i></button> <button class="btn btn-default" id="emojibtn"> <i class="fa fa-smile-o"></i> </button> <button class="btn btn-default"><i class="fa fa-video-camera"></i></button> </div> </div> </div>
我猜测publicView
是您想要在其他视图更改时保持不变的视图。 这是解决它的一种方法。
$stateProvider
.state('home', {
url: '/home',
views: {
'@': {
templateUrl: 'search.html'
},
'publicView@': {
templateUrl: 'private-chat.html'
}
}
})
.state('home.friend', {
views: {
'@': {
templateUrl: 'friend.html'
}
}
})
.state('home.group', {
views: {
'@': {
templateUrl: 'group.html'
}
}
});
默认URL是/home
。 访问它时, publicView
填充有private-chat.html
,未命名的ui-view
填充有search.html
。
对于friend
和group
状态,他们publicView
,并且不使用新的URL ,这就是我认为您想要的。 这是通过使他们成为孩子的home
状态并绝对指定应更改哪些视图来实现的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.