如何使用angular-js $資源？

所以我試圖使用angular-js $資源函數，同時使用離子框架構建應用程序。但我似乎無法讓它工作。相關的代碼：

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）將始終打印 '未定義'。我已經呆了好幾個小時了，我似乎無法找到問題所在。

來源

2015-09-18 user2443088

您收到了一些非常好的答案，所以我只會說明爲了徹底而明顯。在瀏覽器中導航到http：// localhost：5432/api/pages，並確保它返回您期望的數據。 –

的.query()實際結果的對象是會在某個時刻保持結果的承諾。

因此，在您嘗試訪問您的有效負載的結果屬性時，很可能請求尚未完成。

然而，角ng-repeat語句有一個內置支持的承諾，以便在您看來，browse.html，如果你這樣做：

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

而不是處理您的控制器$scope.results的，一切都應該看起來更好。

來源

2015-09-18 13:17:42

Omg，非常感謝。我無法在任何地方找到明確的文檔。 – user2443088

是的，該文檔有點粗糙但很徹底。關於http調用和promise的細節在''http'''節中：https://code.angularjs.org/1.4.6/docs/api/ng/service/$http（'''$ resource '''是一個抽象的） –

$ scope.pages是一個承諾。要寫入安慰你需要使用一個回調函數是這樣的：

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

來源

2015-09-18 13:17:36 DenimChicken

這裏是我的服務建議：

.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你查詢不返回一個數組（它是假的）。

如果您的後端是正確定義的，這隻需要工作。

來源

2015-09-18 13:17:57 yuro

如何使用angular-js $資源？

回答

相關問題