Second click on navbar menu item loading new state using ui-route and angularJS

时间:2017-04-10 01:39:17

标签: angularjs angular-ui-router

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);
}]);

0 个答案:

没有答案