如何使用angular-js $ resource？

Question

所以我试图在使用离子框架构建应用程序时使用angular-js $ resource函数。 但是我似乎无法使其正常工作。 相关代码：

Service.js

.factory('Pages', function($resource) {
    var source = $resource("http://localhost:5432/api/pages",{},
    {query: { method: "GET", isArray: false }});
    return source;
})

controllers.js

.controller('PagesCtrl', function($scope, Pages) {
$scope.pages =  Pages.query();
$scope.results = $scope.pages.results;
console.log($scope.results);
})

browse.html

<ion-view view-title="Browse">
  <ion-content>
    <h1>Browser</h1>
    <ion-list>
      <ion-item ng-repeat="page in results">
        <h2>{{page.title}}</h2>
      </ion-item>

    </ion-list>
  </ion-content>
 </ion-view>

和数据

{
"count": 2,
"next": null,
"previous": null,
"results": [
    {
        "id": 1,
        "parent": null,
        "title": "Blog",
        "content": "<p>Blog</p>",
        "content_model": "richtextpage",
        "slug": "blog",
        "publish_date": null,
        "login_required": false,
        "meta_description": "Blog",
        "tags": ""
    },
    {
        "id": 2,
        "parent": null,
        "title": "Lorem Ipsum",
        "content": "Lorem ipsum ....",
        "tags": ""
    }
]
}

但是控制台日志（在controllers.js中）将始终显示“ undefined”。 我已经呆了好几个小时了，但似乎找不到什么地方。

Answer 1

$ scope.pages是一个承诺。 要写入控制台，您需要使用如下回调函数：

$scope.pages = Pages.query();
$scope.pages.$promise.then(function (result) {
  console.log(results);
});

Answer 2

.query()的实际结果对象是一个承诺，它将在某个时候保存结果。

因此，当您尝试访问有效负载的result属性时，请求可能尚未完成。

但是，Angular ng-repeat语句具有对promise的内置支持，因此，如果您这样做，则在您的视图中为browse.html。

  <ion-item ng-repeat="page in pages.results">

而不是在您的控制器中处理$scope.results ，一切应该看起来更好。

Answer 3

这是我对服务的建议：

.factory('Pages', function($resource) {
    return {
       source: $resource("http://localhost:5432/api/pages",{},
                   { 
                      query: { 
                          method: "GET", 
                          isArray: false 
                      }
                    })
    }
})

然后在ctrl中：

.controller('PagesCtrl', function($scope, Pages) {
    $scope.pages =  Pages.source.query();
    $scope.results = $scope.pages;
    console.log($scope.results);
})

但是您知道查询仅返回一个对象，因为您告诉$resource您的查询没有返回数组（它为false）。

只有在正确定义了后端的情况下，这才起作用。