Prianca Prianca - 4 months ago 35
AngularJS Question

Angular - Bootstrap: Page navigation (Next and back button) using Angular UI-route not working when changing the state from controller

I am trying to achieve page navigation (Next and back button) using Angular UI-route. I am changing the state from controller and it is getting changed on view as well but is not redirecting me to that page.
I have achieved it using button click using $state.go('stateName') but I want use Bootstrap page for this .

plunker

here is my code



$stateProvider
.state('settings', {
url: '/settings',
templateUrl: 'templates/settings.html'
})
.state('settings.profile', {
url: '/profile',
templateUrl: 'templates/profile.html',
controller: 'ProfileController'
})
.state('settings.account', {
url: '/account',
templateUrl: 'templates/account.html',
controller: 'AccountController'
})
.state('settings.profile1', {
url: '/profile1',
template: 'settings.profile1'

})
.state('settings.account1', {
url: '/account1',
template: 'settings.account1'

});

$urlRouterProvider.otherwise('/settings/profile');


// controlller
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {

$scope.nextState = 'settings.account';
$scope.previousState = $state.current;
//alert('$stateChangeStart')
});







<ul class="pager">
{{nextState}}
<li><a ui-sref=".{{previousState}}">Previous</a></li>
<li><a ng-click=".{{nextState}}">Next</a></li>
</ul>




Answer

Here is what I observed, if you use ui-sref with some scope variable, first time it works properly and generate href related to state. But when scope variable changes href is not changed, may be a issue.

Not sure why $stateChangeSuccess is not working properly. I am handling states from rootScope, but you can move this code SettingsController.

Plunker

example.run(function($rootScope, $state){
  var arrState = [];
  var states = $state.stateRegistry.states;

  angular.forEach(states, function(key, value) {
    if (value !== "") {
      arrState.push(value)
    }
  });
  $rootScope.$on('$locationChangeSuccess', function(){
    var n = !$state.current.name ? 1 : arrState.indexOf($state.current.name) + 1;
    $rootScope.next = arrState[n];  
    var p = !$state.current.name ? 0 : arrState.indexOf($state.current.name) - 1;
    if (p <0 ) p = 0;
    $rootScope.previous = arrState[p];  
  });
  $rootScope.goNext = function () {
    $state.go($rootScope.next);
  }

  $rootScope.goPrevious = function () {
    $state.go($rootScope.previous);
  };
});

Used goNext & goPrevious with ng-click.

Comments