使用AngularJS的$资源来查询数据库

Question

我已经创建了一个通过网址工作的API，该网址基于node.js，express.js，mongoDB和angular.js构建。

我的API就像这样调用：

app.get('/api/posts/:query', api.postsQuery);

因此，如果我输入localhost:3000/api/posts/<whateverquery>，mongoDB会将所有相关的JSON吐出到我的浏览器中，所以这个工作正常。

但是，我正在尝试将其链接到我的Angular前端，这会导致问题。我希望用户能够搜索表单并让我的数据库返回正确的记录。这是我的控制器：

function indexCtrl($scope, $http, $resource) {
  $scope.itemSearch = $resource('http://localhost\\:3000/api/posts/:query', 
    {query:''}, {get:{method:'JSONP'}});

  $scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm});
    console.log($scope.posts[1]) // returns undefined
  }
}

我的问题是，当我运行$scope.doSearch时，我在Chrome的资源面板中看到了这样的查询：因此确实正在加载正确的数据，但它并没有附加到{{1 }}

我觉得这可能是因为我需要一个回调函数;我尝试使用$scope.posts，但这会混淆我的查询/ API（因为它会在callback: JSON_CALLBACK调用的末尾添加?callback=...，这会破坏查询。

关于我在这里可以做些什么来实现它的任何想法？问题是缺少回调吗？也许我可以在$resource之后添加一些正则表达式app.get之后允许任何通配符＆gt;

Answer 1

将回调添加到$ resource调用：

$scope.doSearch = function(){
    $scope.itemSearch.get({query:$scope.searchTerm}, function(data){
        $scope.posts = data.posts;
        console.log($scope.posts[1]);
    });
};

请注意docs他们使用回调：

var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
    u.abc = true;
    u.$save(function(u, putResponseHeaders) {
    //u => saved user object
    //putResponseHeaders => $http header getter
    });
});

Answer 2

基于文档的外观（并且知道AngularJS正常地异步执行所有操作）看起来下面的代码应该可以工作

$scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm}, function(){
        console.log($scope.posts[1]) // hopefully is something
    });
  }

http://docs.angularjs.org/api/ngResource。$资源

由于事情是异步完成的（为了避免阻塞/等待/暂停），通常会对可能需要时间的任何事情（网络调用）进行回调或承诺。

Answer 3

解决此问题的“Angular”方法是使用$q library作为承诺。

function indexCtrl($scope, $resource, $q) {
  var defer = $q.defer();

  var resource = $resource('http://localhost\\:3000/api/posts/:query', {query:''}, {get:{method:'JSONP'}});

  resource.get({query:'mySearchQuery'}, defer.resolve);

  defer.promise.then(function(data) {
    $scope.posts = data;
  });
}