2017-08-28 83 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

我希望這可以幫助別人:)