Imagine an app with two sides: "left" and "right", each with tabs. The application's URL structure is formatted like this:
app/splitscreen/?leftTab=1&rightTab=1
Currently, the HTML template is set up as follows:
<!-- splitscreen.tpl.html -->
<!-- left side -->
<a ui-sref="splitscreen({leftTab: 1})">Left tab 1</a>
<a ui-sref="splitscreen({leftTab: 2})">Left tab 2</a>
<div ui-view="left"></div>
<!-- right side -->
<a ui-sref="splitscreen({rightTab: 1})">Right tab 1</a>
<a ui-sref="splitscreen({rightTab: 2})">Right tab 2</a>
<div ui-view="right"></div>
Defined state:
$stateProvider.state('splitscreen', {
url: '/splitscreen?leftTab&rightTab',
views: {
'app': {
templateUrl: 'splitscreen.tpl.html'
},
'left@splitscreen': {
template: 'I\'m left'
},
'right@splitscreen': {
template: 'I\'m right'
}
}
});
The issue arises when clicking on tabs reloads the entire 'splitscreen' state. The goal is to only update the content of the 'left' and 'right' views. How can this be achieved?
An attempt was made by setting reloadOnSearch: false in the 'splitscreen' configuration, but then the tabs were no longer clickable.
Here's a link to the plunker.