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

Question

我在 Angular JS 中使用 routeProvider:

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

如何将参数传递给 Controller ​​ 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

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

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

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

注入(inject) $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?

希望这可以帮助。