Question

我是否可以在UI路由器中定义一个状态，作为所有其他状态的子状态或父状态列表？

我有一个login状态，可以打开一个模态，然后用于登录或注册等。

目前，我已将其定义如下：

$stateProvider.state('index',{
    url: '/',
    templateUrl: '/static/partials/index.html',
    controller: 'indexCtrl'
}).state('index.login',{
    url:'login',
    onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) {
        $modal.open({
            windowClass: 'modal fade login-modal',
            templateUrl: "/static/partials/modals/loginModal.html",
            controller: 'loginCtrl'
        }).result.finally(function() {
            $state.go('^');
        });
    }]
});

我想做的是

$stateProvider.state('index',{
    url: '/',
    templateUrl: '/static/partials/index.html',
    controller: 'indexCtrl'
}).state('login',{
    url:'login',
    parent: 'List of parent states here', //States that can be defined as parents
    onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) {
        $modal.open({
            windowClass: 'modal fade login-modal',
            templateUrl: "/static/partials/modals/loginModal.html",
            controller: 'loginCtrl'
        }).result.finally(function() {
            $state.go('^');
        });
    }]
});

如果没有，我如何使用ui-router来实现我的想法？

Answer 1

我不确定我的问题是否正确，但我觉得你想要一个单亲状态（登录）和多个子状态（登录，注册......）。

如果是这种情况，您可以将主状态创建为abstract，然后创建子项..

$stateProvider
  .state("loginDialog", {
    url: "/login/",
    templateUrl: "loginDialog.html",
    abstract: true
  })
  .state("loginDialog.login", {
    url: "", //default partial shown in loginDialog
    templateUrl: "login.html"
  })
  .state("loginDialog.signup", { //another view shown instead of login
    url: "^/login/signup/",
    templateUrl: "signup.html"
  });

对Angular UI路由器中的所有其他状态使用与子状态相同的状态

1 个答案: