AngularJS – 使用$resource.query与params对象

发布时间：2020-12-17 08:36:16 所属栏目：安全来源：网络整理

导读：我试图拿起 angular.js ，并努力弄清楚一些文档稍微少一点的东西。考虑这 – 我在服务器上有一个搜索方法，接受查询参数并返回搜索结果的集合，并响应GET /search.json路由(Rails FWIW)。因此，使用jQuery，示例查询将如下所示： $.getJSON('/search',{ q:

我试图拿起 angular.js，并努力弄清楚一些文档稍微少一点的东西。

考虑这 – 我在服务器上有一个搜索方法，接受查询参数并返回搜索结果的集合，并响应GET /search.json路由(Rails FWIW)。

因此，使用jQuery，示例查询将如下所示：

$.getJSON('/search',{ q: "javascript",limit: 10 },function(resp) {
  // resp is an array of objects: [ { ... },{ ... },... ]
});

我试着实施这个使用角度，并包装我的头如何工作。这是我现在：

var app = angular.module('searchApp',['ngResource']);

app.controller('SearchController',['$scope','$resource',function($scope,$resource){

  $scope.search = function() {
    var Search = $resource('/search.json');
    Search.query({ q: "javascript",function(resp){
      // I expected resp be the same as before,i.e
      // an array of Resource objects: [ { ... },... ]
    });
  }
}]);

并在视图中：

<body ng-app="searchApp">
  ...
  <div ng-controller="SearchController">
    ...
    <form ng-submit="search()">...</form>
    ...
   </div>
</body>

但是，我不断收到类似TypeError：Object#< Resource>没有方法“push”和$ apply已经在进行中。

如果我将$资源初始化更改为以下情况，似乎正常工作：

var Search = $resource("/search.json?" + $.param({ q: "javascript",limit: 10 }));
Search.query(function(resp){ ... });

似乎更直观地初始化$资源一次，然后传递不同的查询参数与所请求的搜索中的更改。我不知道如果我做错了(很可能)或只是误解了调用$ resource.query与查询params对象作为第一个参数的文档是可行的。谢谢。

TypeError: Object # has no method ‘push’ and $apply already
in progress

因为您尚未使用名称Search定义资源。首先你需要定义这样的资源。下面是一个示例实现

angular.module('MyService',['ngResource'])
       .factory('MyResource',['$resource',function($resource){

    var MyResource = $resource('/api/:action/:query',{
        query:'@query'
    },{ 
        search: {
            method: 'GET',params: {
                action: "search",query: '@query'
            }
        }
    }); 
    return MyResource;
}]);

将此模块包含在您的应用程序中，并在像这样的控制器中使用它

$scope.search_results = MyResource.search({
   query: 'foobar'  
},function(result){});

但我不知道这是否是你需要的。资源服务与RESTful服务器端数据源(也称为REST API)进行交互。

也许你只需要一个简单的http get：

$http({method: 'GET',url: '/someUrl'}).
  success(function(data,status,headers,config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data,config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

http://docs.angularjs.org/api/ng.$http

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!