AngularJS 嵌套路由

标签 angularjs angularjs-routing

我正在处理一个相当简单的 AngularJS 项目,其中包含一些深层路由嵌套以从嵌套数据结构中进行选择:

angular.module('doccat', []).
 config(['$routeProvider', function($routeProvider) {
     $routeProvider.
         when('/',                    { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0',                 { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1',             { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2',         { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2/:p3',     { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         when('/:p0/:p1/:p2/:p3/:p4', { templateUrl: 'partials/detail.html', controller: DocDetailCtrl }).
         otherwise({ redirectTo: '/' });
 }]);

function DocDetailCtrl($scope, $routeParams) {
   var path = [];
   if ($routeParams.p0) path.push($routeParams.p0);
   if ($routeParams.p1) path.push($routeParams.p1);
   if ($routeParams.p2) path.push($routeParams.p2);
   if ($routeParams.p3) path.push($routeParams.p3);
   if ($routeParams.p4) path.push($routeParams.p4);

   // do stuff with  path
}

这在路径中最多有 5 层,对于我的目的来说应该足够了,所以现在已经足够了。但是,底层数据可以嵌套任意深度,这将需要任意路由。
我认为最理想的方法是一条路线,上面写着“路径的所有其余部分都转到任何参数数组”,但在 AngularJS 中似乎没有办法做任何类似的事情。只是为了完整起见,有没有人知道这样做的方法?

最佳答案

检查文档中的 $routeProvider
angularjs $routeProvider .

特别是,在 'when' 的定义中,您可以阅读:“路径可以包含以星号 (*name) 开头的命名组。当路由匹配时,所有字符都急切地存储在给定名称下的 $routeParams 中。”所以你只需要确保路由匹配,你就会得到大量存储在 $routeParams 中的参数。

我希望它有帮助。

关于AngularJS 嵌套路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17300845/

相关文章:

angularjs - Angular.js $resource 结果

angularjs - 如何在 ngRepeat 中突出显示选定的行?

javascript - Angular 1.5 中的组件通信

javascript - 在移动设备中播放音频——Angular ng-click,DOM 异常 35 NotAllowedError

php - AngularJS ngRoute 和 PHP $_SESSION 变量

angularjs - AngularJS-使用routeProvider “when”变量构造templateUrl名称吗?

angularjs - 使用 angularjs 动态 url 路由

javascript - Angular 1 : Change title depending on current route

javascript - 为什么 AngularJS 在我的路由中复制查询字符串?

javascript - 将网络浏览器控件与 angularjs 一起使用