web-dev-qa-db-fra.com

Angular: Passage des paramètres de $ routeProvider au contrôleur

J'ai plusieurs routes qui invoquent le même contrôleur et j'aimerais lui transmettre différentes variables.

// Example
$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleB'
});

Je sais que je pourrais utiliser l'objet "résoudre":

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    resolve: {test: function() { return true; }}
});

Pour passer une valeur en tant que dépendance:

app.controller('MyController', ['$scope', 'test', function ($scope, test) {
  console.log(test); // true
}

Mon problème avec cette approche est que mon application se bloque si l'objet de résolution manque sur d'autres routes et j'aimerais passer des paramètres facultatifs.

Est-il possible de transmettre des paramètres spécifiques au contrôleur (à partir du fournisseur de route)?

Je vous remercie

javascriptangularjs
36
K. D.

Routage:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleB'
});

Accès: injectez $ route dans votre contrôleur puis utilisez-le

 app.controller('MyController', ['$scope', '$route', function ($scope, $route) {
      var paramValue = $route.current.$$route.paramExample;
      console.log(paramValue); 
 }
53
Aidin

Vous pouvez utiliser resol et $route.currrent.params.test pour transmettre le paramètre de la manière suivante:

$routeProvider
  .when('/a', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = true; }
    }
  })
  .when('/b', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = false; }
    }
  })

Ensuite, dans votre contrôleur, vous pouvez y accéder à partir des $ routeParams:

app.controller('MainCtrl', function($scope, $routeParams) {
  $scope.test = $routeParams.test;
})

http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview

13
Wayne Ellery

La façon la plus naturelle de procéder consiste à effectuer ce que vous feriez normalement lorsque vous souhaitez charger une page avec des paramètres: utilisez les paramètres de requête: http://yoururl.com?param1=value&param2=value

ngRoute est fourni avec le service $ routeParams que vous pouvez injecter dans votre contrôleur. Maintenant, vous pouvez simplement récupérer les valeurs comme celle-ci $routeParams.param1.

Une autre façon de faire consiste à récupérer le chemin avec $location.path et à y définir la variable.

4
wvdz

en utilisant $ routeParams

dans le fichier js principal

routeApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: '../sites/./home.html',
        controller: 'StudentController'
    })
    .when('/viewStudents/:param1/:param2', {
        templateUrl: '../sites/./viewStudents.html',
        controller: 'StudentController'
    })
    .otherwise({
        redirectTo: '/'
    });
 });

 routeApp.controller('StudentController',['$filter','$routeParams', '$location',function($filter,$routeParams,$location){
   var StudentCtrl = this;  
   StudentCtrl.param1 = $routeParams.param1;
   StudentCtrl.param2 = $routeParams.param2;
 }]);

appelant de Home.html 

 <div class="container">
   <h2> Welcome </h2>
   <a href="#/viewStudents/myname/somevalue2">Students</a>
</div>
0
Amay Kulkarni