javascript - 如何在移动应用程序中显示 WP 帖子中的媒体(视频)

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和 excerpt post的属性(property)

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

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

这是 Angular 部分

.controller('NewsCtrl', function($scope,
                                 $ionicLoading,
                                 FreshlyPressed, $stateParams) {
  $scope.posts = [];
  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();
})

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $scope.postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK';
      $http.jsonp($scope.postsURL).success(function(data, status, headers, config) {
        $scope.posts = data;
      });
    },
    getPostById: function(postId) {
      var url ='http://urbanetradio.com/wp-json/posts/'+ postId;
      return $http.get(url);
    }
  }
})

.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed) {
  var postId = $stateParams.postId;
      console.log( $stateParams)
 FreshlyPressed.getPostById(postId).success(function(response){
    $scope.post = response;
  })
});

Answer 1

好吧，我玩了你的代码，你错过了 $sce服务(严格上下文转义)。每次嵌入某种形式的 HTML 时，您都需要确保 Angular 将其视为安全的。

将其添加到您的 Controller :

.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 的工作分支