Question

使用AngularUI Router我希望嵌套一些URI，而不是它们的视图或控制器操作。

例如，我想要这些URI：

/things - 列出最近的事情。
/things/:x - 显示标识为x的内容的详细信息。

如果我使用"Nested States & Views" from the wiki那么我必须实际嵌套＆＃34;事物列表＆＃34;并且＆＃34;显示单一的东西＆＃34;意见，恰好是无关的。而且，＆＃34;显示单一的东西＆＃34;范围将包含＆＃34;事物列表＆＃34;即使它不需要它们。

如果我使用"Nested States & Views" from the README，那么我就会得到一个单独的/things/list URI，而不是像我想要的那样普通的/things。

好像我想要一个单独的＆＃34;列表＆＃34; （或＆＃34;索引＆＃34;）声明解析为基本URL的其他嵌套状态，但不将视图和操作传递给子状态。这可能吗？

Answer 1

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

使用您在问题中提供的路线，以下是您可以如何处理的路线示例。

DEMO（带代码）：http://plnkr.co/edit/sxOeCBipiQS7AOt4Ax4L?p=preview

DEMO（没有代码，显示路线网址）：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
    }
  });
});

希望这有帮助，如果您有任何问题，请告诉我们！

在Angular UI路由器中嵌套URI但不是控制器或视图

1 个答案: