無法使用REST API

我有一個簡單的RESTful API使用Django Rest Framework進行設置，我試圖使用AngularJS來使用它。我已閱讀有關角度控制器和資源，我正在遵循多個教程，但出於某種原因，在我的模板中，我似乎無法正確訪問JSON。無法使用REST API

app.js

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

blogApp.factory('Post', ['$resource', function($resource) { 
    return $resource('/api/posts/:slug/', { slug:'@slug'}); 
}]); 

blogApp.controller('postController', ['$scope', 'Post', function($scope, Post) { 
    $scope.posts = [] 

    Post.query().$promise.then(function(posts) { 
     $scope.posts = posts; 
     for (key in posts){ 
      console.log(posts[key]); 
     } 
    }); 
}]);

的index.html **** ****編輯我加了這裏的過濾器進行測試，它也做過濾如預期，但仍沒有內容顯示了<div>的

<div class="container"> 
    <div class="col-sm-10"> 

     <div ng-controller="postController"> 
     <input type="text" ng-model="textTest"> 

     <div class="well" ng-repeat="(key, post) in posts | filter: textTest"> 
      <h1>{{ post.title }}</h1> 
      {{ post.content }} 
     </div> 
     </div> 

    </div> 
</div>

這是，如果我做/ API /職位得到什麼返回/

[ 
    { 
     "url": "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/", 
     "id": 0, 
     "title": "I had a api... his name was Bingo", 
     "content": "E-I-E-I-O", 
     "owner": "Heather", 
     "comments": "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/comments/" 
    }, 
    { 
     "url": "http://localhost:8000/api/posts/if-i-could-show-you-the-world/", 
     "id": 1, 
     "title": "If I Could Show You The World", 
     "content": "It would be shining, and shimmering", 
     "owner": "Heather", 
     "comments": "http://localhost:8000/api/posts/if-i-could-show-you-the-world/comments/" 
    }, 
    ... 
]

在模板中，所有顯示的內容都是一個空白的灰色框（由於引導類），沒有標題或帖子內容，但正確數量的框顯示了發佈對象的數量。我錯過了什麼？

編輯：控制檯顯示沒有錯誤，GET請求返回200 application/json。我有一個console.log（$ scope.posts），它打印出[Resource, Resource, Resource, Resource, Resource, Resource, Resource, $promise: Object, $resolved: true]。此外，

for (key in $scope.posts){ 
    console.log(posts[key]); 
}

打印出

Resource {url: "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/", id: 0, title: "I had a api... his name was Bingo", content: "E-I-E-I-O", owner: "Heather"…}

來源

2014-09-04 Tyler Davidson

你在控制檯中看到了什麼？使用DevTools->網絡 - >過濾XHR並查看返回的內容 – Angela 2014-09-04 06:24:33

答案是令人沮喪的簡單。因爲我爲我的API使用了django-rest-framework，並且默認情況下django對它的變量使用雙花括號，所以它變得困惑。我只需要改變分隔符。

var blogApp = angular.module('blogApp', ['ngResource'], function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
});

然後在我的模板中使用'[[]]'作爲角度變量。（例如[[ post.title ]]）

來源

2014-09-04 17:35:45

你需要把$範圍。$適用（），因爲這是一個異步調用

來源

2014-09-04 06:39:08 lastboy

我是否在控制器的末尾添加了這個？ – 2014-09-04 06:43:07

將其添加到正在檢索數據的位置。該命令是關於更新範圍的。當範圍屬性更新時，您需要將其應用於範圍。在成功檢索到請求後將其放在承諾中，並使用新數據設置範圍屬性 – lastboy 2014-09-04 06:59:42

它沒有幫助，它只引入$ rootScope錯誤。 Angular表示，該行動已在進行中。 – 2014-09-04 07:20:04

這可能會工作。

blogApp.controller('postController', ['$scope', 'Post', function($scope, Post) { 
    $scope.posts = [] 

    Post.query().$promise.then(function(posts) { 
     $scope.posts = posts; 
     $scope.$apply(); 
    }); 
}]);

來源

2014-09-04 07:05:40 CodePrimate

當我添加申請中，我從角度獲得$ rootScope錯誤。它說它已經在進行中。總之，它不能解決我的問題。 – 2014-09-04 07:19:13

無法使用REST API

回答

相關問題