get post 绑定到 wp rest api on angular(ionic) 中的 id
get post bind to id in wp rest api on angular(ionic)
我正在尝试在 ionic(angular) 应用程序中使用 wp-rest-api v2 从 wordpress 站点加载每个 posts,然后 link 每个 post 到所需的 post 和页面,问题是 post id 未显示,因此如果我将鼠标悬停在 [=19= 中的任何 post 上] 我只看到 link 到 #/app/posts/ 而不是例如 #/app/posts/4821(它是样本的 ID post)
// 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>
您没有正确访问 post 项,您使用的是 post.ID 而不是 recentPost.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 build 成为 url。像这样:
<ion-item class="item item-avatar item-text-wrap" ng-repeat="recentPost in recentPosts | filter: searchText" ui-sref="app.postDetails({postId: recentPost.ID})">
我正在尝试在 ionic(angular) 应用程序中使用 wp-rest-api v2 从 wordpress 站点加载每个 posts,然后 link 每个 post 到所需的 post 和页面,问题是 post id 未显示,因此如果我将鼠标悬停在 [=19= 中的任何 post 上] 我只看到 link 到 #/app/posts/ 而不是例如 #/app/posts/4821(它是样本的 ID post)
// 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>
您没有正确访问 post 项,您使用的是 post.ID 而不是 recentPost.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 build 成为 url。像这样:
<ion-item class="item item-avatar item-text-wrap" ng-repeat="recentPost in recentPosts | filter: searchText" ui-sref="app.postDetails({postId: recentPost.ID})">