I have a navbar with a menu.
When I click on "Patients" menu item at the first time, i am redirecting to a new state("patient.searchPatient") with a html view with some fields to query patients. This works well.
The problem happens when I click again into "Patients" menu item. In this case, the state is not redirecting and my state goes to "patients" with a blank html because my template to "patients" contains only a placeholder to ui-view.
I can reload the state if I do "reload:true", as:
<li id="menu_patient" ui-sref-active="active"> <a ui-sref-opts="{reload:true}" ui-sref="patients()">Patients</a></li>
but, using it I have a side effect to reset the state/view elements.
Is there a way, to avoid this problem of load other state after a second click on menu item, without reload the state?
Markup:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li id="menu_patient" ui-sref-active="active"> <a ui-sref="patients()">Patients</a></li>
<li id="menu_about" ui-sref-active="active"> <a ui-sref="about()">About</a></li>
</ul>
</div>
<div ui-view></div>
JS:
angular.module("clinang", ["ui.router","ui.bootstrap",]);
angular.module("clinang").config(function($stateProvider, $urlMatcherFactoryProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state('patients', {
url: '/patients',
views:{
'':{
template: '<div ui-view></div>',
controller: 'patientCtrl'
}
}
})
.state('patient.searchPatient', {
url: '/searchPatient',
views:{
'':{
templateUrl: '/views/searhPatient.html',
controller: 'searchPatientCtrl'
}
}
})
});
angular.module("clinang").controller('patientCtrl', ['$scope','$state',function($scope,$state){
$state.go('patient.searchPatient');
}]);
angular.module("clinang").controller('searchPatientCtrl',['$scope','$state',function($scope,$state){
console.log($state);
}]);