Multiple views, UI-route issue - angularjs

Question

Im facing an issue while using(Multiple views, UI-route) widget wise implementation. I have two widgets(named upper and lower widget); in which both the widget have table content showing some details . While I click on the content in upper widgets, it shows a tabular content in that widgets itself but the data under lower widget is missing. Actually we want to display both the widget content without reflecting any issues while clicking on single widget content. Also I’m here by listed out the code which I used on.
Here is my code
code herehttp://plnkr.co/edit/1yczuGbjK5yBOzjzWpk5?p=preview
1:-index page
<div ui-view="mj" style="padding-top: 80px;"></div>
<div ui-view="mj1" style="padding-top: 80px;"></div>
2:-app.js
angular.module('uiRouterSample', [
'uiRouterSample.contacts',
'ui.router'
])
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state("home", {
url: "/",
views: {
'mj': {
templateUrl: 'tabtable.html'
},
'mj1': {
templateUrl: 'tabtable1.html'
}}
})
}
]
);
3 :-first widget -tabtable.html
<table>
<tr>
<td><a ui-sref="contacts.tab1">1</a></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
4 :-2nd widget -tabtable1.html
<table>
<tr>
<td><a ui-sref="contactsmj.tab1mj">1</a></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
5:loading widget data -contacts.js
angular.module('uiRouterSample.contacts', [
'ui.router'
])
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
views: {
'mj': {
templateUrl: 'contacts.html',
}
}
}).state('contacts.tab1', {
url: '/tab1',
views: {
'cjtab': {
templateUrl: 'contacts.detail.html'
}
}
})
.state('contacts.tab2', {
url: '/tab2',
views: {
'cjtab': {
templateUrl: 'contacts.detail2.html'
}
}
}).state('contacts.tab3', {
url: '/tab3',
views: {
'cjtab': {
templateUrl: 'contacts.detail3.html'
}
}
}).state('contactsmj', {
abstract: true,
url: '/contactsmj',
views: {
'mj1': {
templateUrl: 'contactsmj.html',
}
}
})
.state('contactsmj.tab2mj', {
url: '/tab2mj',
views: {
'mjtab': {
templateUrl: 'contacts.detail2.html'
}
}
}).state('contactsmj.tab3mj', {
url: '/tab3mj',
views: {
'mjtab': {
templateUrl: 'contacts.detail3.html'
}
}
}).state('contactsmj.tab1mj', {
url: '/tab1mj',
views: {
'mjtab': {
templateUrl: 'contacts.detail.html'
}
}
});
}
]
);
6:-click on corresponding link -1 st widget Content page will be loaded
<div>
<div>
<div>
widget 2 Tabs
<ul>
<li><a ui-sref="contactsmj.tab1mj">widget 2-Tab 1</li>
<li><a ui-sref="contactsmj.tab2mj">widget 2-Tab 2</li>
<li><a ui-sref="contactsmj.tab3mj">widget 2-Tab 3</li>
</ul>
</div>
</div>
<div ui-view="mjtab"></div>
</div>
7:-click on corresponding link -2 nd widget Content page will be loaded
<div>
<div>
<div>
widget 2 Tabs
<ul>
<li><a ui-sref="contactsmj.tab1mj">widget 2-Tab 1</li>
<li><a ui-sref="contactsmj.tab2mj">widget 2-Tab 2</li>
<li><a ui-sref="contactsmj.tab3mj">widget 2-Tab 3</li>
</ul>
</div>
</div>
<div ui-view="mjtab"></div>
</div>

Answer 1

Problem - When you are changing route, your view is getting updated and in the new view you are only mapping either of the named view, because of which the other view is being lost.
There are few possible solution to your problem.
You have to update your parent state(s) in contacts.js. Like
.state('contacts', {
abstract: true,
url: '/contacts',
views: {
'mj': {
templateUrl: 'contacts.html'
},
'mj1': {
templateUrl: 'tabtable1.html'
}
}
Do not change route, simply bind the clicks and get the template, compile it and do the DOM manipulation - not recommended.
There is a solution proposed for parallel views at "https://stackoverflow.com/a/23840379/1132354"