Javascript AngularJS：如何通过 ng-href 将多个参数传递给控制器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35967305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS : How to pass multiple parameters to controller through ng-href?
提问by J.K.A.
I've a table containing edit button to update the record. When I'm passing single idto ng-hrefits working fine and opening form page:
我有一个包含编辑按钮的表来更新记录。当我将 single 传递id给ng-href它的工作正常和打开表单页面时：
Ex: In my index.htmltable
例如：在我的index.html桌子上
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>
But I want to pass one more parameter along with row._idto ng-href like:
但我想再传递一个参数row._id给 ng-href，例如：
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
Its not working and redirecting to home page.
它不工作并重定向到主页。
Here's my controller:
这是我的控制器：
$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.jsfor routing:
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'
});
}]);
Here what exactly I want to do is after clicking on editbutton it should redirect to form.htmlwith parameter/data of idand collectionName
这里我想要做的是点击edit按钮后它应该重定向到form.html参数/数据id和collectionName
Any help would be appreciated.
任何帮助，将不胜感激。
回答by Shaishab Roy
If you want to use multiple params in ng-hrefyou should also update your route url in app.js.
如果你想使用多个参数，ng-href你还应该更新你的路由 url app.js。
when you used multiple parameters in ng-hrefbut no route matching with this route then worked otherwiseroute that redirect to home.
当您在其中使用多个参数ng-href但没有与此路由匹配的otherwise路由时，则重定向到home.
you can try it.
你可以试试看。
in html:
在 html 中：
<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>
add a route in app.jslike
添加的路线app.js一样
.when('/provider/:id/collectionName/:cName', {
templateUrl: 'templates/provider/form.html',
controller: 'YourController'
});
and in controller need to change like:
并且在控制器中需要更改为：
$http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
.success(function (response) {
alert(response);
$scope.providerList = response;
$scope.id = response['_id'];
});
so server side route should be like: /providerlist/:id/collectionName/:cName
所以服务器端路由应该是这样的： /providerlist/:id/collectionName/:cName
回答by damitj07
The path in ngRoute path can contain named groups starting with a colon and ending with a star like :name* , All characters are eagerly stored in $routeParamsunder the given name when the route matches.
ngRoute 路径中的路径可以包含以冒号开头并以星号结尾的命名组，如 :name* ，当路由匹配时，所有字符都急切地存储在给定名称下的$routeParams中。
For example, routes like : /color/:color/largecode/:largecode*/edit
例如，像这样的路由：/color/:color/largecode/:largecode*/edit
For this sample URL : /color/brown/largecode/code/with/slashes/edit
对于此示例 URL：/color/brown/largecode/code/with/slashes/edit
And extract:
并提取：
color: brown
largecode: code/with/slashes.
颜色: 棕色
largecode：代码/带/斜线。
So in your case it the Route will be
所以在你的情况下，路线将是
.when('/provider/:id*\/collectionName/:collectionName*\', {
templateUrl: 'templates/provider/form.html',
controller: 'ProviderController',
controllerAs: 'provider'
})
This will ensure that even if there are special characters and forward slashes in your resultant href link you are redirected to proper controller and page...
这将确保即使在生成的 href 链接中有特殊字符和正斜杠，您也会被重定向到正确的控制器和页面...
