无法使用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

回答

相关问题