我可以使用ui-router作为索引的子状态吗？

My routes look like:

我的路线看起来像:

$stateProvider.state('repository', {
  url: '/:host/:owner/:repository',
  views: {
    appView: {
      templateUrl: '/templates/app/repository.html'
    }
  }
}).state('repository.analytics', {
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryAnalytics.html'
    }
  }
}).state('repository.commit', {
  url: '/:host/:owner/:repository/commit/:commitHash',
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryCommit.html'
    }
  }
}).state('repository.file', {
  url: '/file?path',
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryFile.html'
    }
  }
});

I want the base URL for all repository-like states, that's why I'm specifying the url there. As an example, if I didn't do it this way, I would have to specify everything as it's shown in the commit state. This is verbose and not something I want to do.

我想要所有类似存储库的状态的基本URL,这就是我在那里指定URL的原因。举个例子,如果我没有这样做,我必须指定在提交状态下显示的所有内容。这很冗长,而不是我想做的事情。

So is it possible to have a default child state for repository so that if someone is directed there, then that child view loads?

那么是否可以为存储库设置一个默认的子状态,以便如果某人被指示在那里,那么该子视图会加载?

** UPDATE ** This seems to work just fine if I click through the app, but if I go to the /:host/:owner/:repository URL directly, the child view (analytics) never loads.

**更新**如果我点击应用程序,这似乎工作正常,但如果我直接转到/:host /:owner /:存储库URL,子视图(分析)永远不会加载。

2 个解决方案

#1

I don't know whether you can have a default child state, but you can set subview in that parent state. Like this:

我不知道您是否可以拥有默认子状态,但您可以在该父状态下设置子视图。喜欢这个:

$stateProvider.state('repository', {
  url: '/:host/:owner/:repository',
    views: {
      appView: {
        templateUrl: '/templates/app/repository.html'
      },
      'repositoryView@repository': { // it means the repositoryView of repository state.
        templateUrl: '/templates/app/_repositoryAnalytics.html'    
      }
    }
  })

Then, when you open with repository state or URL, the analytics page will be loaded in repositoryView view of repo page.

然后,当您使用存储库状态或URL打开时,分析页面将加载到repo页面的repositoryView视图中。

[updated] This format 'repositoryView@repository' means that, the view 'repositoryView' in the state 'repository'. Because you try to open the state 'repository', with a default sub-view. And the sub view 'repositoryView' is defined in 'repository.html'. If you didn't set the state scope, ui-router will think that the sub-view 'repositoryView' belongs to 'repository' 's parent view.

[更新]此格式'repositoryView @ repository'表示状态'repository'中的视图'repositoryView'。因为您尝试使用默认子视图打开状态“存储库”。子视图'repositoryView'在'repository.html'中定义。如果你没有设置状态范围,ui-router会认为子视图'repositoryView'属于'repository'的父视图。

I don't know whether I explain it clearly, you can check the ui-router wiki

我不知道我是否清楚解释,你可以查看ui-router wiki

#2

I created working plunker here. One way could be to use eventing to force go to child state, when parent is selected (resolved from url)

我在这里创造了工作的plunker。一种方法是使用事件强制转到子状态,当选择父级时(从url解析)

.run(['$rootScope', '$state', '$stateParams',
  function($rootScope, $state, $stateParams) {

    $rootScope.$on('$stateChangeStart', function(event, toState, toPrams) {
      if (toState.name === "repository") {
        event.preventDefault();
        $state.go('repository.analytics', toPrams);
      }
    });
  }
])

Check it here

在这里查看

Some other topics about redirections parent-child:

关于重定向父子的一些其他主题:

Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

Angular UI-Router $ urlRouterProvider。当我点击时不工作

Angular UI-Router $urlRouterProvider .when not working *anymore*

Angular UI-Router $ urlRouterProvider。当不工作*再*

#1