Angular - Bootstrap：使用 Angular UI 的页面导航（下一步和后退按钮）- 从控制器更改状态时路由不起作用

Question

我正在尝试使用 Angular UI-route 实现页面导航（下一步和后退按钮）。我正在从控制器更改状态，它也在视图中发生更改，但没有将我重定向到该页面。我已经通过使用 $state.go('stateName') 单击按钮实现了它，但我想为此使用 Bootstrap 页面。

plunker

这是我的代码

$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 1

这是我观察到的，如果您将 ui-sref 与某些范围变量一起使用，第一次它会正常工作并生成与状态相关的 href。但是当范围变量改变时，href 没有改变，可能是一个问题。

不确定为什么 $stateChangeSuccess 无法正常工作。我正在处理来自 rootScope 的状态，但您可以移动此代码 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);
  };
});

通过 ng-click 使用 goNext 和 goPrevious。

Angular - Bootstrap：使用 Angular UI 的页面导航（下一步和后退按钮）- 从控制器更改状态时路由不起作用

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

javascript

navigation

twitter-bootstrap

angularjs