3

我将 Angular 与 UI-router 一起使用，我希望用户始终（或在大多数情况下，但为简洁起见，我们可以说“始终”）在我的主页 step1 上输入 Web 应用程序。

UI-路由器配置速记：

.config(function($stateProvider, $urlRouterProvider) {

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

    var step1 = {
        name : 'step1',
        url : '/step1',
        templateUrl: 'partials/step1.html'
    };
    var step2 = {
        name : 'step2',
        url : '/step2',
        templateUrl: 'partials/step2.html'
    };
    .
    .
    .
    .
}

我可以做一个解析或指定一个控制器并简单地设置 $location.path('/step1')，但是有没有办法只设置一个入口点，并且只有在从 step1 开始后才能访问 step2 / step3 url，没有重定向的成本？
提前致谢

4

2 回答 2

9

要解决此问题，您还可以使用 $stateChangeStart 事件。

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
  if (fromState.name === '' && toState.name !== 'state1'){
    event.preventDefault();
    $state.go('state1');
  }
});

来源：https ://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-create-rules-to-prevent-access-to-a-state

于 2014-10-05T07:57:11.757 回答
5

我想这就是你所追求的——

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

        .state('step1', {
          url: "/step1",
          templateUrl: "partials/step1.html",
          controller: "step1Ctrl"
        })

        .state('step2', {
          parent: 'step1',
          url: "/step2",
          templateUrl: "partials/step2.html",
          controller: "step2Ctrl"
        })

        .state('step3', {
          parent: 'step2',
          url: "/step3",
          templateUrl: "partials/step3.html",
          controller: "step3Ctrl"
        });

    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');

})

这是一个按钮，单击后将导航到第 2 步 -

<button ui-sref="step2">Step 2</button>

于 2014-05-06T15:08:44.440 回答