如何在 Angular JS 的 routeProvider 中传递参数？

Question

我在 Angular JS 中使用 routeProvider：

.when('/profile/personal', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

如何将参数传递给控制器​​EditProfileController，并在此处调用返回数据的 Ajax 方法。该数据必须显示在personal.html的路由模板中。

例子：

    .controller('EditProfileController', ['$scope', '$http', function ($scope, $http) {
         // If was click on `/profile/personal` from route, must get patam `personal` and call method GetAjax(param);
         $scope.GetAjax = function (param){
            //here return data put it in template HTML from route
         }  

    }]);

我的链接按路径位于页面中：

http://wd.tk/profile

当我点击链接路由时，我得到 URL：

http://wd.tk/profile#/profile/personal/1

我做：

.controller('EditProfileController', ['$scope', '$http', function ($scope, $http, $routeParams) {
   console.log($routeParams);
}]);

我得到错误：

TypeError: Cannot read property 'idProfile' of undefined

Answer 1

您需要更改您的 $routeProvider，它应该有 /profile/:type 而不是 /profile/personal，这意味着您将为 :type 提供值，可以通过在控制器内注入 $routeParams 服务来访问。

.when('/profile/:type', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

控制器

.controller('EditProfileController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
     $scope.profileType = $routeParams.type;
     $scope.GetAjax = function (){
        //here you have profile type in $scope.profileType
        //you can pass it to ajax by simply accessing scope variable.
        $http.get('/getprofiledata?type='+ $scope.profileType)
        .success(function(data){
           $scope.profileData = data;
        })
        .error(function(error){
           console.log('error occured')
        })
     }  
     $scope.GetAjax(); //calling it on controller init
}]);

更新

你错过了数组注释中的一个依赖$routeParams。

.controller('EditProfileController', ['$scope', '$http', '$routeParams',function ($scope, $http, $routeParams) {
   console.log($routeParams);
}]);

Answer 2

首先，在你的url配置中，你必须把url的参数：

when('/profile/personal/:idProfile', {
       templateUrl: 'personal.html',
       controller: 'EditProfileController'
})

现在，在您的 EditProfileController 中，您应该获取参数并调用 ajax 请求：

注入 $routeParams 对象并用

获取参数

$routeParams.idProfile:

.controller('EditProfileController',  
function ($scope, $http, $routeParams) {

   var idProfile = $routeParams.idProfile;

   $http.get("service url").then(setData, setError);

   function setData(data) {
       $scope.data = data;
   }
   function setError() {
       alert("error on get data profile");
   }

}]);

在您的 html 中，您将以正确的格式显示您的数据配置文件。

但我建议所有的 ajax 调用都应该在 Angular 服务中分组。 PD： 查看 Angular ui 路由器：

What is the difference between angular-route and angular-ui-router?

希望这会有所帮助。