如何将控制器变量作为AngularJS $资源请求的参数传递?

时间:2016-01-31 18:39:13

标签: javascript angularjs angular-services ngresource angularjs-ng-resource

我是angularjs的新手,我认为这应该是一件简单的事情,但我无法完成它。基本上我需要的是从服务获取变量并将其作为GET请求中的参数传递。为此,我使用的是ngResource模块。

我从服务获得的变量可能会发生变化,同样,我需要更改发出请求的网址以及将在视图中显示和显示的数据。

这就是为什么我需要获取该变量,将其传递给控制器​​并在该控制器中使用服务中的param定义$ 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);
    });
}]);

LicoresService

.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变量改变其值时我都需要调用该函数。但我不知道该怎么做。

1 个答案:

答案 0 :(得分:0)

您可以创建$scope.watch来包装资源调用。手表接受带有旧值和新值参数的回调函数,它将在每个$digest上轮询您的范围值,并且您可以根据更改有条件地调用$资源:

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

  }

});