如何在角度$http中传递 URL 参数

How to pass URL params in angular $http

本文关键字：URL 参数 http      更新时间：2023-09-26

我正在将服务器端 CRUD 应用程序转换为 Angular.js并遇到了一个小问题。

我正在通过$http获取数据并通过ng-repeat显示所有数据。我想让用户能够单击特定项目并将其重定向到资源。

那么如何将 URL 参数传递给动态调用$http呢？

以下是我如何构建指向资源的链接 （car.id = 3）

<a ng-href="/#/cars/{{car.id}}">Edit</a>

该链接应转到 http://local.dev/#/cars/3

那么如何在控制器中绑定动态 url？

这是我的控制器的精简版本

App.controller('CarIndexCtrl', ['$scope', '$http', '$location', function ($scope, $http, $location) {
   $scope.car = {};
   $http({
     method: 'GET',
     url:  $location.$$url,
   })
   .success(function (data, status, headers, config) {
     $scope.car = data;
   })
   .error(function (data, status, headers, config) {
     // error
   });
}]);

所以我有兴趣以角度方式绑定 URL。上述解决方案有效，但感觉非常像黑客。我对 Angular 不太熟悉，所以我现在喜欢坚持默认设置。不过，我可能会在以后考虑 restangular 或 ng-resource......

上述解决方案有效，但感觉非常像黑客。

我不认为它的黑客或乱七八糟的东西。

我会在控制器中生成 URL 列表（在我看来它更适合代码维护），而无需追加到 HTML 中。像这样：

 $scope.urlList = [];
    $http({
     method: 'GET',
     url:  $location.$url,
   })
   .success(function (data, status, headers, config) {
     $scope.car = data;
     $scope.urlList.push("/#/cars/" + data.id);
   })
   .error(function (data, status, headers, config) {
     // error
   });

在 HTML 中之后：

<li ng-repeat="url in urlList" repeat-done="layoutDone()" ng-cloak>
    <a ng-href="{{url}}">Edit</a>
</li>

顺便说一句，我建议您使用一些加载器，因为我们从承诺（又名异步）生成的 URL 链接因此会延迟。

演示小提琴

在你的应用中.js做这样的事情

 var app = angular.module('YourAPP');
        app.config(function ($routeProvider) {
            $routeProvider
                .when('/cars/:CarID', {
                    templateUrl: 'app/views/cars.html',
                    controller: 'CarIndexCtrl'
                });
    });

在您的控制器中

    App.controller('CarIndexCtrl', ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {
       $scope.car = {};
        $scope.carid = $routeParams.CarID;
       $http({
         method: 'GET',
         url:  $location.$$url,
       })
       .success(function (data, status, headers, config) {
         $scope.car = data;
       })
       .error(function (data, status, headers, config) {
         // error
       });
}]);

并在控制器中的任何位置使用 carid。希望对您有所帮助。

相关文章：