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

Posted 2023-02-23

【中文标题】AngularJS：如何通过 ng-href 将多个参数传递给控制器​​？

【英文标题】：AngularJS : How to pass multiple parameters to controller through 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：是的.. 但两者都不一样。第二个是带参数第一个不是

是但我认为当您将多个路由映射到同一个控制器功能时..参数处理可能存在问题..您可以尝试修改其中一个并检查它是否有效...

【参考方案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 链接中有特殊字符和正斜杠，您也会被重定向到正确的控制器和页面...