I am new in angularjs and I think this should be a simple thing to do but I could not accomplish it. Basically what I need is to get a variable from an service and pass it as a parameter in a GET request. For this I am using the ngResource module.
The variable I get from the Service may change and what i need , likewise, is to change the url that made the request as well as the data that would render and be show in the view.
That's why i need to get that variable, pass it to a controller and make the $resource request in this controller with the param define in the service.
This is my controller:
.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);
});
}]);
LicoresService
.factory('LicoresService',['$resource',function($resource){
return $resource('http://192.168.0.16:8000/api/productos/',{licorera:2},{isArray:true});
}]);
And CategoriaService (from this one, i get the variable that i need to pass as a param for the request)
.factory('CategoriaService',function(){
var pk=0;
function getPk(){
return pk;
}
function setPk(newpk){
pk=newpk;
}
return{
setPk:setPk,
getPk:getPk,
};
});
In the view i use the ng-repeat directive to iterate through the $scope.licores array.
<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>
The problem seems to be that the LicoresService.query() function is not updating the view. So I think that i need to call that function every time that the $scope.pk variable change his value. But i don´t know how to do it.
You could create a $scope.watch
to wrap your resource call. A watch accepts a callback function with arguments for old and new values, it will poll your scope value on every $digest
and you can conditionally call your $resource based on changes:
$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);
});
}
});