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

Question

我有一个包含编辑按钮的表来更新记录。当我将单个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

任何帮助都将不胜感激。

Answer 1

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

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

你可以尝试一下。

in 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

Answer 2

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

例如，路线如： / color /：color / largecode /：largecode * / edit

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

提取：

  

颜色：棕色

     

largecode ：code / with / slashes。

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

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

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