web-dev-qa-db-fra.com

AngularJS: Comment transmettre plusieurs paramètres au contrôleur via ng-href?

J'ai un tableau contenant le bouton d'édition pour mettre à jour l'enregistrement. Lorsque je passe unique id à ng-href sa page de formulaire fonctionne bien et s’ouvre:

Ex: Dans ma table index.html

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>

Mais je veux passer un paramètre supplémentaire avec row._id à ng-href comme:

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

Son ne fonctionne pas et redirige vers la page d'accueil.

Voici mon contrôleur:

    $timeout(function () {
        if ($routeParams.id !== undefined) {                
            $http.get('/providerlist/'+$routeParams.id, {
                params:{
                    id:$routeParams.id, 
                    collectionName:$routeParams.collectionName
                }
            }).success(function (response) {
                alert(response);
                $scope.providerList = response;
                $scope.id = response['_id'];
            });
        }
    });

app.js pour le routage:

var ProviderApp = angular.module('ProviderApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'templates/home/index.html',
        controller: 'HomeController',
        controllerAs: 'home'
    })

    .when('/provider', {                            
        templateUrl: 'templates/provider/index.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .when('/provider/:id', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .otherwise({
        redirectTo: '/home'
    });
}]);

Voici ce que je veux faire, c'est qu'après avoir cliqué sur le bouton edit, il devrait être redirigé vers form.html avec le paramètre/les données de id et collectionName

Toute aide serait appréciée.

javascriptangularjsmean-stack
4
Sky

Si vous souhaitez utiliser plusieurs paramètres dans ng-href, vous devez également mettre à jour l'URL de votre route dans app.js.

lorsque vous avez utilisé plusieurs paramètres dans ng-href mais qu'aucune route ne correspond à cette route, la route otherwise a fonctionné et a été redirigée vers home.

tu peux l'essayer.

en html:

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

ajouter une route dans app.js comme

.when('/provider/:id/collectionName/:cName', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'YourController'
    });

et dans le contrôleur doivent changer comme:

 $http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
 .success(function (response) {
     alert(response);
     $scope.providerList = response;
     $scope.id = response['_id'];
 });

alors la route côté serveur devrait ressembler à: /providerlist/:id/collectionName/:cName

6
Shaishab Roy

Le chemin dans ngRoute peut contenir des groupes nommés commençant par un signe deux-points et se terminant par une étoile telle que: nom *, tous les caractères sont stockés avec impatience dans $ routeParams sous le nom indiqué lorsque l'itinéraire correspond.

Par exemple, des itinéraires tels que:/color /: color/largecode /: largecode */edit  

Pour cet exemple d'URL:/color/brown/largecode/code/with/slashes/edit  

Et extrait: 

couleur : marron

largecode : code/avec/slash.

Donc, dans votre cas, la route sera 

.when('/provider/:id*\/collectionName/:collectionName*\', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })

Cela garantira que même s'il y a des caractères spéciaux et des barres obliques dans votre lien href résultant, vous êtes redirigé vers le contrôleur et la page appropriés ...

1
damitj07