我正在将服务器端CRUD应用程序转换为Angular.js并且遇到一个小问题。
我正在使用$http
获取数据,并通过ng-repeat
显示所有数据。我想让用户能够点击和特定项目并将其重定向到资源。
那么如何动态地将URL参数传递给$http
get call?
以下是我构建资源链接的方法(car.id = 3)
<a ng-href="/#/cars/{{car.id}}">Edit</a>
该链接应转到http://local.dev/#/cars/3
那么如何在我的控制器中绑定动态网址?
这是我的控制器的精简版
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 ...
答案 0 :(得分:2)
上述解决方案有效,但感觉非常像黑客。
我认为它不是黑客或其他东西。
我会在控制器中生成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>
顺便说一句,我建议你使用一些加载器,因为我们从promise(也就是async)生成的URL链接因此有延迟。
演示 Fiddle
答案 1 :(得分:1)
在你的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。希望它有所帮助。