AngularJS：如何通过 ng-href 将多个参数传递给控制器？答案

【问题标题】：AngularJS : How to pass multiple parameters to controller through ng-href?AngularJS：如何通过 ng-href 将多个参数传递给控制器？
【发布时间】：2016-06-28 07:07:43
【问题描述】：

我有一个表格，其中包含用于更新记录的编辑按钮。当我将单个 id 传递给 ng-href 时，它的工作正常并打开表单页面：

例如：在我的index.html 表中

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

但我想将另一个参数与row._id 一起传递给 ng-href，例如：

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

它不工作并重定向到主页。

这是我的控制器：

    $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 用于路由：

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'
    });
}]);

我真正想做的是在点击edit 按钮后，它应该重定向到form.html，参数/数据为id 和collectionName

任何帮助将不胜感激。

【问题讨论】：

您需要将 '/provider/:id'... 更改为 ...'/provider/:id/collection/:collectionName' ，然后在控制器中使用这些参数。 . 使用 $routeParams....
@damitj07：我试过.when('/provider/:id/collection/:collectionName', { templateUrl: 'templates/provider/form.html', controller: 'ProviderController', controllerAs: 'provider' })，但它不起作用
我认为那是因为你有两个 roues /provider/... 同名...
@damitj07：是的.. 但两者都不一样。第二个是带参数第一个不是
是但我认为当您将多个路由映射到同一个控制器功能时..参数处理可能存在问题..您可以尝试修改其中一个并检查它是否有效...

标签： javascript angularjs mean-stack

【解决方案1】：

如果您想在ng-href 中使用多个参数，您还应该在app.js 中更新您的路由网址。

当您在ng-href 中使用了多个参数但没有与此路由匹配的路由时，otherwise 路由将重定向到home。

你可以试试。

在 html 中：

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

在app.js 中添加路由喜欢

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

并且在控制器中需要更改如下：

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

所以服务器端路由应该是：/providerlist/:id/collectionName/:cName

【讨论】：

写得一模一样，但它不起作用..在这之后我应该在控制器中写什么？
哦，太好了.. 这就是我所缺少的.. 更新了我的代码，它现在可以工作了.. 感谢 shaishab..!!!

【解决方案2】：

ngRoute 路径中的路径可以包含以冒号开头并以星号结尾的命名组，例如 :name* ，当路由匹配时，所有字符都急切地存储在给定名称下的 $routeParams 中。

例如，像这样的路由：/color/:color/largecode/:largecode*/edit

对于这个示例网址：/color/brown/largecode/code/with/slashes/edit

并提取：

颜色：棕色

大代码：代码/带/斜线。

所以在你的情况下，路线将是

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

这将确保即使生成的 href 链接中有特殊字符和正斜杠，您也会被重定向到正确的控制器和页面...

【讨论】：