使用其余API將angular js與wordpress集成時遇到問題

Question

好的，所以我已經按照相應的順序將以下文件包含在wordpress中：

<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>

現在在我的首頁模板文件中，我有這個：

<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:postmaster@localhost\" />\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:postmaster@localhost\">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"}

現在，如果我轉到以下URL： http：// localhost / blog / wp-json / wp / v2 / posts，我得到了一些JSON對象，但只有10個左右，數據庫中有300多個帖子。

任何人都知道如何解決這個問題。

干杯

Answer 1

好的，這里有些錯誤。

其余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。除非我指定更多。

更多信息可以在這里找到。

我希望這可以幫助其他人:)

使用其余API將angular js與wordpress集成時遇到問題

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-28 04:52:48

使用其余API將angular js與wordpress集成時遇到問題

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-28 04:52:48

解決方案1
0 已采納 2017-08-28 04:52:48