进入角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>