javascript - 在 AngularUI 路由器中嵌套 URI 但不嵌套 Controller 或 View

Question

使用 AngularUI Router我想嵌套一些 URI 但不是它们的 View 或 Controller 操作。

例如，我想要这些 URI:

1. /things - 列出最近的事情。
2. /things/:x - 显示 ID 为 x 的事物的详细信息。

如果我使用 "Nested States & Views" from the wiki然后我必须实际嵌套“事物列表”和“显示单个事物” View ，这恰好是不相关的。此外，“显示单个事物”范围将具有“事物列表”，即使它不需要它们。

如果我使用 "Nested States & Views" from the README然后我有一个单独的 /things/list URI，而不是我想要的普通旧 /things。

我似乎想要一个单独的“列表”(或“索引”)状态，它解析为其他嵌套状态的基本 URL，但不将 View 和操作传递给子状态。这可能吗？

Answer 1

我建议不要使用嵌套路由，而是专门声明 url；但是，您也可以使用 absolute route - '^/things/:x'。

使用您在问题中提供的路线，这里有一个您可能如何去做的示例。

演示(带代码):http://plnkr.co/edit/sxOeCBipiQS7AOt4Ax4L?p=preview

DEMO(无代码，显示路由 URL):http://run.plnkr.co/uT4PLYDqk8ItzqaK/#/things

首先，设置应用程序:

var app = angular.module('myApp', [
    'ui.router'
]);

接下来，为应用配置各种状态。您可以使用 angular-ui-router 的 $stateParams service在 url 中公开任何参数，如果您需要从资源/服务中获取任何数据，这会很方便:

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

  // for any unknown routes, default to the '/things' url
  $urlRouterProvider.otherwise('/things')

  $stateProvider
    .state('things', {
      url: '/things',
      templateUrl: 'things.html',
      controller: function($scope, $state) {
        // add items to the scope
        $scope.items = ['Thing 1', 'Thing 2', 'Thing 3'];

        // create an action that will change the state
        $scope.goToDetails = function(scope) {
          $state.go('details', {
            x: scope.item
          })
        }
      }
    })
  // create the details state
  .state('details', {
    url: '^/things/:x',
    templateUrl: 'details.html',
    controller: function($scope, $stateParams) {
      // use $stateParams service
      $scope.data = 'I am ' + $stateParams.x
    }
  });
});

希望这对您有所帮助，如果您有任何问题，请告诉我!