Как передать URL-параметры в угловом $ http

Question

Я конвертирую приложение 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-ресурс позднее ...

Answer 1

Данное решение работает, но очень похоже на хак.

Я не думаю, что его взломали или что-то грязное.

Я бы сгенерировал список 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 ссылки мы формируем из обещании (ака асинхронной), поэтому с опозданием.

Demo Fiddle

Answer 2

В ваших app.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 в везде, где в вашем контроллере. Надеюсь, поможет.