javascriptangularjsangular-servicesngresourceangularjs-ng-resource

How to pass a controller variable as a parameter for a AngularJS $resource request?


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.


Solution

  • 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);
        });
    
      }
    
    });