2017-08-28 82 views
2

好了,所以我已包括下列文件整合的角度JS与WordPress到WordPress在各自的顺序:遇到问题使用REST API

<script type='text/javascript' src='http://localhost/blog/wp-content/themes/my-theme/js/angular-1.6.4/angular.min.js?ver=4.8.1'></script> 
<script type='text/javascript' src='http://localhost/blog/wp-content/themes/my-theme/js/angular-1.6.4/angular-resource.min.js?ver=4.8.1'></script> 
<script type='text/javascript' src='http://localhost/blog/wp-content/themes/my-theme/js/angular-1.6.4/angular-route.min.js?ver=4.8.1'></script> 
<script type='text/javascript'> 
/* <![CDATA[ */ 
var localized = {"partials":"http:\/\/localhost\/blog\/wp-content\/themes\/my-theme\/partials\/"}; 
/* ]]> */ 
</script> 
<script type='text/javascript' src='http://localhost/blog/wp-content/themes/my-theme/js/my-angular-scripts.js?ver=4.8.1'></script> 

里面my-angular-scripts.js我有以下几点:

var myApp = angular.module('myblog',['ngRoute']).config(function($routeProvider, $locationProvider) { 
$routeProvider 
.when('/blog/', { 
    templateUrl: localized.partials + 'test.html', 
    controller: 'MainCtrl' 
}) 
}); 

myApp.controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
$http.get('wp-json/wp/v2/posts').then(function(res){ 
    $scope.posts = res; 
}); 
}]); 

在标题模板我有这个:

<html <?php language_attributes(); ?> ng-app="myblog"> 
<head> 

现在在我的首页te mplate文件我有这样的:

<div ng-controller="MainCtrl"></div> 

和我的部分看起来像这样:

<div ng-repeat="post in posts"> 
<a href="{{ post.slug }}"> 
    {{ post.title }} 
</a> 
</div> 

当我运行它,我得到这样一个错误:

Possibly unhandled rejection: {"data":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\r\n \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\" xml:lang=\"en\">\r\n<head>\r\n<title>Object not found!</title>\r\n<link rev=\"made\" href=\"mailto:[email protected]\" />\r\n<style type=\"text/css\"><!--/*--><![CDATA[/*><!--*/ \r\n body { color: #000000; background-color: #FFFFFF; }\r\n a:link { color: #0000CC; }\r\n p, address {margin-left: 3em;}\r\n span {font-size: smaller;}\r\n/*]]>*/--></style>\r\n</head>\r\n\r\n<body>\r\n<h1>Object not found!</h1>\r\n<p>\r\n\r\n\r\n The requested URL was not found on this server.\r\n\r\n \r\n\r\n The link on the\r\n <a href=\"http://localhost/blog/\">referring\r\n page</a> seems to be wrong or outdated. Please inform the author of\r\n <a href=\"http://localhost/blog/\">that page</a>\r\n about the error.\r\n\r\n \r\n\r\n</p>\r\n<p>\r\nIf you think this is a server error, please contact\r\nthe <a href=\"mailto:[email protected]\">webmaster</a>.\r\n\r\n</p>\r\n\r\n<h2>Error 404</h2>\r\n<address>\r\n <a href=\"/\">localhost</a><br />\r\n <span>Apache/2.4.25 (Win32) OpenSSL/1.0.2j PHP/5.6.30</span>\r\n</address>\r\n</body>\r\n</html>\r\n\r\n","status":404,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"wp-json/wp/v2/posts","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"} 

现在,如果我去这个网址:http://localhost/blog/wp-json/wp/v2/posts 我得到一些JSON对象,但只有10个左右,有> 300个职位的数据库。

任何人知道如何解决这个问题。

干杯

回答

0

好有几件事错在这里。

的链接,该REST API JSON数据是错的,我的方式是在结果数据注入的职位是错误的。 我用这个链接:

`blog/wp-json/wp/v2/posts` 

和验证码就可以得到结果,并注入到控制器:

$http.get('blog/wp-json/wp/v2/posts').then(function(res){ 
    $scope.posts = res.data; 
}); 

而且不是使用我只是用这个我的模板头版部分:

<div ng-controller="MainCtrl"> 
    <div ng-repeat="post in posts"> 
     <a href="{{ post.link }}"> 
      {{ post.title.rendered }} 
     </a> 
    </div> 
</div> 

我得到10个帖子而不是> 300的原因是因为默认情况下其余的api只会返回10.除非我指定更多。

更多信息可以found here

我希望这可以帮助别人:)