Question

我的路线如下：

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

我想要所有repository状态的基本网址，这就是我在那里指定url的原因。例如，如果我没有这样做，我将必须指定commit状态中显示的所有内容。这很冗长，而不是我想做的事。

那么default可能有一个repository子状态，这样如果某人被指示在那里，那么该子视图会加载吗？

**更新** 如果我点击应用程序，这似乎工作正常，但如果我直接转到/:host/:owner/:repository网址，则子视图（分析）永远不会加载。

Answer 1

我不知道您是否可以拥有默认子状态，但您可以在该父状态下设置子视图。像这样：

$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'    
      }
    }
  })

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

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

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

Answer 2

我创建了working plunker here。一种方法是使用事件强制转到child 状态，当父被选中时（从网址解析）

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

检查here

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

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

2 个答案: