0

ionic(angular) アプリで wp-rest-api v2 を使用して wordpress サイトから各投稿を読み込んでから、このリストの各投稿を目的の投稿とページにリンクしようとしていますが、問題は投稿 ID が表示されないことです。 posts.html のいずれかの投稿にカーソルを合わせると、たとえば #/app/posts/4821 の代わりに #/app/posts/ へのリンクが表示されます (サンプル投稿の ID です)。

// in App.js I have the route for this pages 

  .state('app.posts', {
    url: '/posts',
    data : { auth : true },
    cache : false,
    views: {
      'menuContent': {
        templateUrl: 'templates/posts.html',
        controller : 'PostsCtrl'
      }
    }
  })
  .state('app.postDetails', {
    url: "/postDetail/:postId",
    views: {
      'menuContent': {
        templateUrl: 'templates/postDetail.html',
        controller : 'postDetailCtrl'
      }
    }
  })


  //in controller.js I have the PostsCtrl 
  .controller('postDetailCtrl', function($scope, $http, $stateParams, $sce) {
    $http.get('http://example.com/wp-json/wp/v2/posts/' + $stateParams.postId).then(
      function(returnedData){
        $scope.postDetails = returnedData.data;
        console.log($scope.postDetails);
        $scope.post_title = $sce.trustAsHtml($scope.postDetails.title.rendered);
        $scope.post_content = $sce.trustAsHtml($scope.postDetails.content.rendered);

      }, function(err){
        console.log(err);
      })

})

<!--This will load all the posts in posts.html template -->
<ion-item class="item item-avatar item-text-wrap" ng-repeat="recentPost in recentPosts | filter: searchText" href="#/app/posts/{{post.ID}}">      
 </ion-item>



<!-- this is the postDetails.html, template for each post--> 
   <div class="item item-avatar">
     <div class="text-right item-text-wrap" ng-bind-html="post_title"></div>
      </div>

     <div class="item item-image">
        <img ng-src="{{post_image}}">
     </div>

     <div class="item" dir="rtl">
       <p class="text-right item-text-wrap" ng-bind-html="post_content"></p>
     </div>
4

1 に答える 1

1

投稿アイテムに正しくアクセスしていません。recentPost.ID の代わりに post.ID を使用しています。それ以外は大丈夫だと思います。

次のようになります。

<ion-item class="item item-avatar item-text-wrap" ng-repeat="recentPost in recentPosts | filter: searchText" href="#/app/posts/{{recentPost.ID}}">

href よりも優れているのは、ui-sref を使用して状態とパラメーターを宣言し、Angular に URL を作成させることです。このような：

<ion-item class="item item-avatar item-text-wrap" ng-repeat="recentPost in recentPosts | filter: searchText" ui-sref="app.postDetails({postId: recentPost.ID})">

于 2017-01-08T00:45:58.727 に答える