>>Ir occurs to me that you could avoid the whole problem by using named views in each tab ?
>
>Can you clarify what do you mean? Also, I don't think it will help with the invalid input problem.
It should because you would not be reloading the view when you switch tabs (IIRC your views were not within a tab anyway)
>BTW, did you see my other thread with the solution I implemented? Seems to work nicely...
Didn't look closely but it seems uneccessary. Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div ng-app="theApp">
<div class="container" >
<a ui-sref="home">Go Home</a>
<a ui-sref="list">Go List</a>
<tabset>
<tab heading="Tab 1"><div ui-view="View1"></div></tab>
<tab heading="Tab 2"><div ui-view="View2"></div></tab>
</tabset>
<!--<div ui-view="View1"></div>
<div ui-view="View2"></div>-->
</div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script type="text/javascript">
var theApp = angular.module("theApp", ['ui.router','ui.bootstrap']);
theApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
'View1': { template: 'This is View 1 in Home</br><input type="text"></input>' },
'View2': { template: 'This is View 2 in Home</br><input type="text"></input>' },
}
})
.state('list', {
url: '/list',
views: {
'View1': { template: 'This is View 1 in List</br><input type="text"></input>' },
'View2': { template: 'This is View 2 in List</br><input type="text"></input>'}
}
})
});
</script>
</body>
</html>When you switch between tabs the view persists in it's current state - although, of course, they are lost when you switch between 'Home' and 'List'
