如何将控制器变量作为 AngularJS $resource 请求的参数传递?
How to pass a controller variable as a parameter for a AngularJS $resource request?
我是 angularjs 的新人,我认为这应该是一件简单的事情,但我无法完成。基本上我需要的是从服务中获取变量并将其作为 GET 请求中的参数传递。为此,我正在使用 ngResource 模块。
我从服务中获得的变量可能会发生变化,同样,我需要的是更改发出请求的 url 以及将在视图中呈现和显示的数据。
这就是为什么我需要获取该变量,将其传递给控制器并使用服务中定义的参数在该控制器中发出 $resource 请求。
这是我的控制器:
.controller('LicoresController',['$scope','LicoresService','CategoriaService',function($scope,LicoresService,CategoriaService){
$scope.licores=[];
$scope.pk=CategoriaService.getPk();
console.log($scope.pk);
LicoresService.query({disponibles:$scope.pk},function(data){
$scope.licores=data;
console.log(data);
},function(error){
console.log(error);
});
}]);
Licores服务
.factory('LicoresService',['$resource',function($resource){
return $resource('http://192.168.0.16:8000/api/productos/',{licorera:2},{isArray:true});
}]);
和 CategoriaService(从这个服务中,我得到了我需要作为请求参数传递的变量)
.factory('CategoriaService',function(){
var pk=0;
function getPk(){
return pk;
}
function setPk(newpk){
pk=newpk;
}
return{
setPk:setPk,
getPk:getPk,
};
});
在视图中,我使用 ng-repeat 指令遍历 $scope.licores 数组。
<li ng-repeat="licor in licores">
<img src="{{licor.imagen}}"/>
<table align="center">
<tr><td >{{licor.marca|uppercase}}</td></tr>
<tr><td >Tamaño</td><td >{{licor.tamano}}</td></tr>
<tr>
<td>Precio<br/>
<span >$ {{licor.precio}}</span>
</td>
</tr>
</table>
</li>
问题似乎是 LicoresService.query() 函数没有更新视图。所以我认为每次 $scope.pk 变量改变他的值时我都需要调用那个函数。但是我不知道怎么做。
您可以创建一个 $scope.watch
来包装您的资源调用。手表接受带有旧值和新值参数的回调函数,它将在每个 $digest
上轮询您的范围值,您可以根据更改有条件地调用您的 $resource:
$scope.watch('pk', function(newValue, oldValue) {
// check if the pk has changed
if ( newValue !== oldValue ) {
// query your api if pk has changed
LicoresService.query({disponibles:$scope.pk},function(data){
$scope.licores=data;
console.log(data);
},function(error){
console.log(error);
});
}
});
我是 angularjs 的新人,我认为这应该是一件简单的事情,但我无法完成。基本上我需要的是从服务中获取变量并将其作为 GET 请求中的参数传递。为此,我正在使用 ngResource 模块。
我从服务中获得的变量可能会发生变化,同样,我需要的是更改发出请求的 url 以及将在视图中呈现和显示的数据。
这就是为什么我需要获取该变量,将其传递给控制器并使用服务中定义的参数在该控制器中发出 $resource 请求。
这是我的控制器:
.controller('LicoresController',['$scope','LicoresService','CategoriaService',function($scope,LicoresService,CategoriaService){
$scope.licores=[];
$scope.pk=CategoriaService.getPk();
console.log($scope.pk);
LicoresService.query({disponibles:$scope.pk},function(data){
$scope.licores=data;
console.log(data);
},function(error){
console.log(error);
});
}]);
Licores服务
.factory('LicoresService',['$resource',function($resource){
return $resource('http://192.168.0.16:8000/api/productos/',{licorera:2},{isArray:true});
}]);
和 CategoriaService(从这个服务中,我得到了我需要作为请求参数传递的变量)
.factory('CategoriaService',function(){
var pk=0;
function getPk(){
return pk;
}
function setPk(newpk){
pk=newpk;
}
return{
setPk:setPk,
getPk:getPk,
};
});
在视图中,我使用 ng-repeat 指令遍历 $scope.licores 数组。
<li ng-repeat="licor in licores">
<img src="{{licor.imagen}}"/>
<table align="center">
<tr><td >{{licor.marca|uppercase}}</td></tr>
<tr><td >Tamaño</td><td >{{licor.tamano}}</td></tr>
<tr>
<td>Precio<br/>
<span >$ {{licor.precio}}</span>
</td>
</tr>
</table>
</li>
问题似乎是 LicoresService.query() 函数没有更新视图。所以我认为每次 $scope.pk 变量改变他的值时我都需要调用那个函数。但是我不知道怎么做。
您可以创建一个 $scope.watch
来包装您的资源调用。手表接受带有旧值和新值参数的回调函数,它将在每个 $digest
上轮询您的范围值,您可以根据更改有条件地调用您的 $resource:
$scope.watch('pk', function(newValue, oldValue) {
// check if the pk has changed
if ( newValue !== oldValue ) {
// query your api if pk has changed
LicoresService.query({disponibles:$scope.pk},function(data){
$scope.licores=data;
console.log(data);
},function(error){
console.log(error);
});
}
});