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 wizard-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>

Page wizard-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

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

1 个答案: