I need multiple ui-views
for one URL
(my homepage). The limitation for ui-routing
is that I can't have multiple <div ui-view></div>
but they have to be in their nested states.
<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>
How do I make it so that ui-sref=1
and ui-sref=2
will update the ui-view
inside:
<div class="left-div"></div>
and ui-sref=3 will update the ui-view inside <div class="right-div"></div>
The issue I encountered when I used ui-router was that upon changes from ui-sref
from 1 -> 3
or 2 -> 3
the ui-view
of left-div
will disappear because the URL
changes.
How do I approach this?
EDIT- My current state views
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>
I'm taking a guess that the publicView
is the view you're wanting to stay unchanged while the other views are changing. Here's one way to tackle it.
$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'
}
}
});
The default URL is /home
. When it's accessed, publicView
is populated with private-chat.html
and the unnamed ui-view
is populated with search.html
.
For the friend
and group
states, they leave the publicView
alone and they don't use new URLs, which is what I think you're going for. This is accomplished by making them children states of home
and by specificying absolutely which views should be altered.