2016-12-09 5 views
0

설치된 플러그인 WP-REST v2로 WordPress의 내 게시물을 표시하고 물마루 AngularJS에서 데이터를 가져 오지만 문제가 발생합니다. 나는 그것을 표시 할 수없고이 기사에 따라 코딩했다.WP-json이 angularJS와 함께 표시되지 않습니다

https://amielucha.com/angularjs-json-rest-api-with-wordpress

그래서 내 주요 항목에서는이에 AngularJS와 함께.

app.js :

(function() { 
var app = angular.module('app', ['ngRoute']), 
    api = {}; 

// JSON content Location 
api.query = 'http://myy.website/dlrz/wp-json/wp/v2/posts/'; 

app.config([ '$routeProvider', '$locationProvider', '$qProvider', function($routeProvider, $locationProvider, $qProvider) { 
    // Enable HTML5 Mode 
    $locationProvider.html5Mode(true); 

    // configure routing 
    $routeProvider 
     .when('/', { 
     templateUrl: myLocal.partials + 'main.html', 
     controller: 'Main' 
    }); 

    $qProvider.errorOnUnhandledRejections(false); 
}]); 

// Set Controller and get JSON-Data 
app.controller('Main', [ '$scope', '$http', '$routeParams', '$sce', function($scope, $http, $routeParams, $sce) { 
    $http.get(api.query).then(function(res){ 
     $scope.posts = res; 
     // interate through each field to set it as trusted 
     angular.forEach(res, function(value, key) { 
      // trust each title and excerpt in the object 
      this[key].title.rendered = $sce.trustAsHtml(value.title.rendered); 
      this[key].excerpt.rendered = $sce.trustAsHtml(value.excerpt.rendered); 
     }, $scope.posts); 
     console.log($scope.posts); 
     console.log($sce); 

    }); 
}]); 
})(); 

main.html :

<section> 
<article class="well" ng-repeat="post in posts"> 
    <header> 
     <h1 ng-bind-html="post.title.rendered"> 
      {{post.title.rendered}} 
     </h1> 
    </header> 
    <div class="post-content" ng-bind-html="post.excerpt.rendered"> 
     {{post.excerpt.rendered}} 
    </div> 
</article> 

의 index.php :

<?php /*get_header(); */?> 


<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
     <!-- Required meta tags always come first --> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <base href="<?php echo site_url();?>/"> 

     <title> 
      <?php bloginfo('name'); ?> 
     </title> 
     <?php wp_head(); ?> 
    </head> 
    <body> 
     <h1>Hello World!</h1> 

     <div ng-view></div> 


     <footer> 
      &copy; <?php echo date('Y'); ?> Dart Liga Verband Zürich 
     </footer> 

    </body> 
</html>  
<?php wp_footer(); ?> 
<?php/* get_footer(); */?> 

이들은

내 코드입니다

이것은 json 파일입니다. http://myy.website/dlrz/wp-json/wp/v2/posts

+0

해야 하는가? –

+0

$ http.get에서 약속을 해결하면 즉시'$ scope.posts = res'가 설정됩니다. 나중에 결과를 반복 할 경우이 작업을 수행하지 않으려 고합니다. 어떤 부분이 작동하지 않습니까? 데이터를 가져 오는 중? 보기에 표시 하시겠습니까? –

+0

$ scope.posts를 제거했지만 뷰에 표시 할 수 없으므로 콘솔에서 볼 수 있습니다. http://myy.website/dlrz/ –

답변

1

문제는 응답에서 데이터를 얻는 방법에 있습니다. 당신은

$scope.posts = res; 

를 사용하지만, 당신이 얻을 또는 뭐죠을 console.log는 $에 대한 scope.posts을 확인 했 어떤 오류가

$scope.posts = res.data; 
관련 문제