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按钮后，它应该重定向到带有id和collectionName参数/数据的form.html

任何帮助将不胜感激。

Answer 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

Answer 2

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

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

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

并提取：

颜色： 棕色

大代码：代码/与/斜杠。

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

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

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