如何在同一个应用程序中设置两个$ routeParams？

Question

我正在尝试使用两个$ routeParams，但是，仅显示路径的templateUrl。在所有控制器中能够使用$ routeParams的最佳解决方案是什么？

路线

angular.module('tareasApp') 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    console.log("route") 
    $routeProvider 
    //These are pages that make up the menu 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/humor', { 
     templateUrl: 'views/humor.html', 
     controller: 'HumorCtrl' 
     }) 
     .when('/nature', { 
     templateUrl: 'views/nature.html', 
     controller: 'NatureCtrl' 
     }) 
    // The $routeParams are to the pages of articles 
    // Articles in controller HumorCtrl appear perfectly 
    .when("/:pageName", { 
     templateUrl: "views/wizard-humor.html", 
     controller: "HumorCtrl" 
     }) 

    // Articles in controller NatureCtrl no appear 
    .when("/:pageName", { 
     templateUrl: "views/wizard-nature.html", 
     controller: "NatureCtrl" 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     });  
    }); 

控制器幽默

angular.module('tareasApp') 
    .controller('HumorCtrl', function ($scope, $routeParams, $location) { 

    $scope.pageName = $routeParams.pageName; 

    $scope.items =[ 
    {  
      href:'/gold-digger', 
      img:'digger.jpg', 
      video:'//www.youtube.com/watch?v=lIruzMwBHJY', 
      description:'Gold Digger Camel Prank!' 
    }, 
    {  
      href:'/woman-abused', 
      img:'woman.jpg', 
      video:'//www.youtube.com/watch?v=WXfH3mKqy0A', 
      description:'Woman Abused In Front Of Cops Prank!' 
    } 
    ]; 

     $scope.item = $scope.items.filter(function(item) { 
    return item.href.indexOf($routeParams.pageName) === 1; 
    })[0]; 

}); 

控制器自然

angular.module('tareasApp') 
    .controller('NatureCtrl', function ($scope, $routeParams, $location) { 

    $scope.pageName = $routeParams.pageName; 

    $scope.items =[ 
    {  
      href:'/sound-waves', 
      img:'waves.jpg', 
      video:'//www.youtube.com/watch?v=OG2eGVt6v2o', 
      description:'Those Relaxing Sounds of Waves' 
    }, 
    {  
      href:'/nature-relaxing-sound', 
      img:'ocean.jpg', 
      video:'//www.youtube.com/watch?v=SWR0GdC7_40', 
      description:'Nature Sounds Relaxing Ocean Sounds' 
    } 
    ]; 

     $scope.item = $scope.items.filter(function(item) { 
    return item.href.indexOf($routeParams.pageName) === 1; 
    })[0]; 

}); 

Page向导-humor.html

<div ng-controller="HumorCtrl"> 

    <img ng-src="images/{{ item.img }}" width="400" height="200" > 

    <p>{{item.description}}</p> 

    <iframe width="655" height="400" ng-src="{{ item.video }}" frameborder="0" allowfullscreen></iframe> 
</div> 

页向导nature.html

<div ng-controller="NatureCtrl"> 

    <img ng-src="images/{{ item.img }}" width="400" height="200" > 

    <p>{{item.description}}</p> 

    <iframe width="655" height="400" ng-src="{{ item.video }}" frameborder="0" allowfullscreen></iframe> 
</div> 

编辑：问题是子目录路由不工作...我用html5Mode是我<base>标签由此<base href="/">，如何正确配置子目录正常工作？

Answer 1

你有两次正是这种相同的路线.when("/:pageName", { ..

.when("/:pageName", { 
    templateUrl: "views/wizard-humor.html", 
    controller: "HumorCtrl" 
    }) 

// Articles in controller NatureCtrl no appear 
.when("/:pageName", { 
    templateUrl: "views/wizard-nature.html", 
    controller: "NatureCtrl" 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 

将其更改为：

.when("/humor/:pageName", { 
     templateUrl: "wizard-humor.html", 
     controller: "HumorCtrl" 
    }) 

    // Articles in controller NatureCtrl no appear 
    .when("/nature/:pageName", { 
     templateUrl: "wizard-nature.html", 
     controller: "NatureCtrl" 
    }) 

之后，你可以有一个像/nature/something或

链接请看这里演示http://plnkr.co/edit/fklkUO3YTiXaFYXuDrEz?p=preview