javascript - Angular : How to pass multiple parameters to controller through 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>

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

这是我的 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.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 中更新你的路由 url。

当您在 ng-href 中使用多个参数但没有与此路由匹配的路由时，否则 路由会重定向到 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'
    });

并且在 Controller 中需要像这样改变:

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

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