簡體   English   中英

Angular-引導程序:從控制器更改狀態時,使用Angular UI-route的頁面導航(“下一步”和“后退”按鈕)不起作用

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

我正在嘗試使用Angular UI-route實現頁面導航(“下一步”和“后退”按鈕)。 我正在從控制器更改狀態,它也在視圖中更改,但沒有將我重定向到該頁面。 我已經使用$ state.go('stateName')通過單擊按鈕實現了,但是我想為此使用Bootstrap頁面。

矮人

這是我的代碼

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

這是我觀察到的,如果您將ui-sref與某個范圍變量一起使用,則第一次它可以正常工作並生成與狀態相關的href。 但是,當范圍變量更改href不變時,可能是一個問題。

不知道為什么$ stateChangeSuccess無法正常工作。 我正在處理rootScope的狀態,但是您可以移動此代碼SettingsController。

柱塞

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。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM