Let’s imagine I am building a two-tabs Ionic app. There are a Dashboard tab (tab-dahs) and a Search tab (tab-search).
My search tab displays a list of groups. When I click a group I access its detail.
My router code is like this:
.state('app.group', {
cache: false,
url: '/group',
views: {
'tab-search': {
templateUrl: 'templates/groups/group.html',
controller: 'GroupCtrl'
}
},
data: {
authenticate: true
},
params: {
group: undefined
}
})
And I coded a component for a group with a ui-sref link in it to access the group.html template when clicking on it:
.component('GroupListItem', {
bindings: {
group: '<'
},
template:
`
<div class="item item-avatar item-icon-right byf-group-item" ui-sref="app.group({group: $ctrl.group})">
...
</div>
`,
controller: function() {}
});
To this point everything is ok. Now I want some of this groups to be displayed in my Dashboard.
So I reuse the component but when I click a group I get two problems:
Details gets displayed in the Search view not the Dashboard view
Certainly the direct consequence of point 1, sometimes the data is not displayed and I loose the back arrow
How should I write my state or my ui-sref link so that, base on the previous view, the details state gets display in the appropriate view?
Here is a codepen to illustrate my problem: here