0

node.js、express.js、mongoDBおよびに基づいて、URL を介して動作する API を作成しました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 のリソース パネルにクエリが次のように表示されることです。ここに画像の説明を入力実際には正しいデータが読み込まれていますが、それ自体が にアタッチされていません$scope.posts。

これは、コールバック関数が必要なためだと思います。使用してみcallback: JSON_CALLBACKましたが、クエリ/APIが台無しになります(呼び出し?callback=...の最後にaが追加され$resource、クエリが壊れるため)。

それを機能させるためにここで何ができるかについてのアイデアはありますか? 問題はコールバックの欠如ですか? おそらく、後でワイルドカードを許可するために、app.get呼び出しに正規表現を追加できます>:query

4

3 に答える 3

2

$resource 呼び出しにコールバックを追加します。

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

ドキュメントでコールバックを利用していることに注意してください。

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
    });
});
于 2013-07-09T16:17:20.407 に答える
1

この問題を解決する「Angular」の方法は、Promise に$q ライブラリを使用することです。

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;
  });
}
于 2013-07-09T16:21:41.713 に答える
1

ドキュメントの外観に基づいて（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 .$resource

物事は (ブロック/待機/一時停止を避けるために) 非同期で行われるため、通常、時間がかかる可能性があるもの (ネットワーク呼び出し) に対するコールバックまたはプロミスのいずれかが存在します。

于 2013-07-09T16:13:48.473 に答える