Question

我在移动应用中工作，用户可以通过该应用可视化来自特定WordPress帐户的帖子。

我到目前为止的问题是，我无法显示媒体，只显示图片而不显示视频

这是我使用的插件http://wp-api.org/，这里是Docs for the media，但我仍然无法在整个内容中显示视频。

Here is a Plunker with what I have so far，标题为Disfruta el video-set de Faceblind & Melissa O en Nocturnal #6的第3篇帖子是附加的视频，由于我提到的问题，您无法将其视为可视化。

这是html，您可能会看到title的{{1}}和excerpt属性

post

这里是您可视化<script id="tab-news.html" type="text/ng-template"> <div ng-repeat="post in posts"> <a ng-href="#/tabs/news/{{post.ID}}"> <h2><span ng-bind-html="post.title"></span></h2> <p ng-bind-html="post.excerpt"></p> <p>{{:: post.date | date}}</p> </a> </div> </script>

的完整content的地方

post

这是Angular部分

<script id="tab-post-detail.html" type="text/ng-template">
  <ion-view view-title="Noticia">

      <h3>{{:: post.title}}</h3>
      <p ng-bind-html="post.content"></p>

  </ion-view>
</script>

Answer 1

好的，所以我玩了你的代码，你错过了$sce服务（Strict Contextual Escaping）。每次嵌入某种形式的HTML时，都需要确保Angular将其视为安全。

将此添加到您的控制器：

.controller('PostDetailCtrl', function($scope, $stateParams, $sce, FreshlyPressed) {

    var postId = $stateParams.postId,
    siteId = $stateParams.siteId;
    console.log( $stateParams);

    FreshlyPressed.getPostById(postId).success(function(response){
       console.log(response);
       $scope.post = response;
    });

    // Marks src as safe
    $scope.trustSrc = function(src) {
       return $sce.trustAsHtml(src);
    };
});

在您看来：

<ion-view view-title="Noticia">
  <ion-content has-header="true">
    <div class="list">
      <div class="item item-image text-center item-text-wrap padding">
        <h3 class="item-divider">{{:: post.title}}</h3>
        <p ng-bind-html="trustSrc(post.content)"></p>
      </div>
    </div>
  </ion-content>
</ion-view>

这是Plunker

的工作分支

如何在移动应用中显示WP帖子中的媒体（视频）

1 个答案: