Question

我使用WordPress作为后端开发了一个离子应用程序。为此，我使用wp_query从WordPress中获取博客文章并在离子应用程序中显示它。

问题在于，帖子内容不是在离子中解析为HTML。但是在WordPress编辑器和博客网站的前端，它正确呈现。请在屏幕截图和代码下面找到

在WordPress中使用Rest API代码

$posts_array = array();

$args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish", "posts_per_page" => "-1");

$posts = new WP_Query($args);

if($posts->have_posts()):
    while($posts->have_posts()): 
        $posts->the_post();

        $post_array = array(
            'title'=>get_the_title(), 
            'permalink'=>get_the_permalink(), 
            'content'=>get_the_content(), 
            'date'=>get_the_date(), 
            'img'=>wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'thumbnail')
        );
        array_push($posts_array, $post_array);

    endwhile;
    else:
        echo "{'posts' = []}";
        die();
endif;

echo json_encode($posts_array);

离子应用中的HTML

<section class="list" ng-controller="postController">
    <a href="#" class="item" ng-repeat="post in postsList">
        <article>
            <img ng-src="{{post.img}}" class="item">
            <h2 class="noWhitespace">{{post.title}}</h2>
            <p class="noWhitespace">{{post.content}}</p> <!-- ng-bind-html="toTrustedHTML(post.content)"-->
        </article>
    </a>
</section>

控制器

app.controller("postController",function ($scope, $http){ //, $sce
  $scope.postsList = [];

  $http({
    method: "GET",    
    url: "http://localhost/wordpress/blog-posts/",
  }).then(function(response){
    console.log(response)
    $scope.postsList = response.data;
  });

  /*$scope.toTrustedHTML = function (RESOURCE_URL) {
    return $sce.trustAsHtml(RESOURCE_URL);
  };*/

});

即使我尝试过ng-sanitize，还有用于HTML解析的$ sce。这里ng-bind-html="toTrustedHTML(html)"正在运行，但问题是它在段落之间没有换行符。（显示长文）

提前致谢。

注意： 我们有Rest-WP API和WordPress的JSON-API插件来实现这一目标。但我需要实现这个没有插件。

于2016年12月25日更新

如何将数据传递给另一个控制器？

在'postController'我们得到了response.data，其中包含所有帖子的详细信息，如果我们点击单个帖子，我们如何获得相应帖子的ID，标题和内容。我试过$state.go()但未定义..

提前致谢

Answer 1

此处为可能会发现此问题的其他用户添加解决方案：使用ng-bind-html让角度显示html并通过wpautop（）函数从数据库运行内容以获得正确的格式

Answer 2

通过向post数组中的内容添加wpautop（）函数来解决这个问题。工作代码如下所示：

$post_array = array(
   'title'=>get_the_title(), 
   'permalink'=>get_the_permalink(), 
   'content'=>wpautop(get_the_content()), 
   'date'=>get_the_date(),
   'img'=>wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'thumbnail')
);

和控制器

app.controller("postController",function ($scope, $http, $sce){
  $scope.postsList = [];

  $http({
    method: "GET",    
    url: "http://localhost/wordpress/blog-posts/",
  }).then(function(response){
    console.log(response)
    $scope.postsList = response.data;
  });

  $scope.toTrustedHTML = function (RESOURCE_URL) {
    return $sce.trustAsHtml(RESOURCE_URL);
  };

});

我们也在index.html中使用ng-bind-html

 <article>
     <img ng-src="{{post.img}}" class="item">
     <h2 class="noWhitespace">{{post.title}}</h2>
     <p class="noWhitespace" ng-bind-html="toTrustedHTML(post.content)"></p> 
</article>

感谢胜利者以正确的方式指导我。

使用wp_query的没有插件的WordPress REST API

2 个答案: