Question

我的$stateProvider配置如下：

＆＃13;

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']);
});

＆＃13;

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

＆＃13;

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

＆＃13;

我现在要做的是让按钮自动指向下一个/上一步，如果到达最后一步，则结束下一个按钮应该消失。遗憾的是这个例子似乎没有处理堆栈溢出，所以我也创建了这个例子的jsfiddle版本

更新

澄清：我想要一些动态的东西，以便在步骤的顺序发生变化，删除步骤或添加新步骤时，我不必更改代码。

Answer 1

它并不是很干净，但您可以根据当前步骤生成州名。

链接一个函数changeStep（），它将在params中采用delta并执行类似

的操作

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

以编程方式访问angular-ui-router的所有状态

1 个答案: