我已按照here的指南进行操作,并成功创建了一个有效的基本应用。但是,在提取帖子时,它并未包含特色图片或缩略图。如何获取帖子'缩略图? Here is my app's look
代码:
Menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-dark">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">BrickFame</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/posts">
Posts
</ion-item>
<!--ion-item menu-close ng-click="login()">
Login
</ion-item-->
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
&#13;
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html"
}
}
})
.state('app.posts', {
url: "/posts",
views: {
'menuContent': {
templateUrl: "templates/posts.html",
controller: 'PostsCtrl'
}
}
})
.state('app.post', {
url: "/posts/:postId",
views: {
'menuContent': {
templateUrl: "templates/post.html",
controller: 'PostCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/posts');
});
&#13;
Controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PostsCtrl', function($scope, $http) {
// You can change this url to experiment with other endpoints
var postsApi = 'http://brickfame.rf.gd/wp-json/posts?_jsonp=JSON_CALLBACK';
// This should go in a service so we can reuse it
$http.jsonp( postsApi ).
success(function(data, status, headers, config) {
$scope.posts = data;
console.log( data );
}).
error(function(data, status, headers, config) {
console.log( 'Post load error.' );
});
})
.controller('PostCtrl', function($scope, $stateParams, $sce, $http ) {
// we get the postID from $stateParams.postId, the query the api for that post
var singlePostApi = 'http://brickfame.rf.gd/wp-json/posts/' + $stateParams.postId + '?_jsonp=JSON_CALLBACK';
console.log( $stateParams.postId );
$http.jsonp( singlePostApi ).
success(function(data, status, headers, config) {
$scope.post = data;
// must use trustAsHtml to get raw HTML from WordPress
$scope.content = $sce.trustAsHtml(data.content);
console.log(data);
}).
error(function(data, status, headers, config) {
console.log( 'Single post load error.' );
});
})
&#13;
posts.html
<ion-view view-title="Posts">
<ion-content>
<ion-list>
<ion-item ng-repeat="post in posts" href="#/app/posts/{{post.ID}}">
{{post.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
&#13;