進入角UI路由器的所有狀態編程

Question

我已經配置這樣的$stateProvider：

angular.module('example', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 
    $urlRouterProvider.otherwise("/steps"); 
 
    $stateProvider.state('steps', { 
 
     url: '/steps', 
 
     templateUrl: 'steps.html', 
 
     controller: function($scope, $state) { 
 
      $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
 
      $scope.currentStep = toState.data && toState.data.stepNumber; 
 
      }); 
 
      if ($state.is('steps')) { 
 
      $state.go('.first'); 
 
      } 
 
     } 
 
     }) 
 
     .state('steps.first', { 
 
     url: '/first', 
 
     template: 'First', 
 
     data: { 
 
      stepNumber: 0 
 
     }, 
 
     }) 
 
     .state('steps.second', { 
 
     url: '/second', 
 
     template: 'Second', 
 
     data: { 
 
      stepNumber: 1 
 
     }, 
 
     }) 
 
     .state('steps.third', { 
 
     url: '/third', 
 
     template: 'third', 
 
     data: { 
 
      stepNumber: 2 
 
     }, 
 
     }); 
 
    }); 
 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['example']); 
 
});

ul { list-style: none; } 
 
li { display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script> 
 
<script type="text/ng-template" id="steps.html"> 
 
    <h2>{{ currentStep }}</h2> 
 
    <div ui-view></div> 
 
    <button ng-if="currentStep !== 0">Prev</button> 
 
    <button>Next</button> 
 
</script> 
 
<div> 
 
    <h1>Example</h1> 
 
    <ul> 
 
    <li><a ui-sref="steps.first">goTo First</a> 
 
    </li> 
 
    <li><a ui-sref="steps.second">goTo Second</a> 
 
    </li> 
 
    <li><a ui-sref="steps.third">goTo Third</a> 
 
    </li> 
 
    </ul> 
 
    <div ui-view></div> 
 
</div>

我想現在要做的，是讓按鈕自動指向下一步/上一步，結束下一步按鈕應該消失，如果到達最後一步。可悲的是這個例子似乎並沒有被工作的堆棧溢出，所以我還創建了一個jsfiddle版本這個例子

UPDATE

澄清：我想要的東西的動態，這樣我就不必改變代碼如果步驟順序發生變化，步驟將被刪除，或添加新步驟。

Answer 1

它不是很乾淨，但您可以根據當前步驟生成狀態名稱。

鏈接功能changeStep（），將採取增量在PARAMS和做這樣的事情

$scope.changeStep = function (delta) { 
     var newStep = $scope.currentStep + delta; 
     var stateName = "steps."; 

     switch (newStep){ 
      case 1: 
       stateName += "first"; 
       break; 
      etc... 
     } 

     $state.go(stateName); 
} 

所以在你的模板steps.html做到這一點

<button ng-if="currentStep !== 0" ng-click="changeStep(-1)">Prev</button> 
    <button ng-click="changeStep(1)" ng-if="currentStep !== 2">Next</button>