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

Question

我尝试使用两个 $routeParams ，但是，仅显示路线的 templateUrl 。能够在所有 Controller 中使用 $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: '/'
        });    
  });

Controller 幽默

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];

 });

Controller 性质

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];

 });

页面向导-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 或 /humor/something

请在此处查看演示 http://plnkr.co/edit/fklkUO3YTiXaFYXuDrEz?p=preview