我是AngularJS和Ionic的新手,我正在尝试将json数据放到页面中,但我似乎无法让它工作。
在我的app.js中,我有这个:
(function() {
var app = angular.module('myreddit', ['ionic', 'angularMoment','LocalStorageModule']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url : '/',
templateUrl : 'index.html',
controller : 'MainController'
});
$stateProvider.state('posts', {
url: '/posts',
templateUrl: 'templates/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise("/");
});
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
然后我有一个名为WPCtrl.js的文件,它是:
angular.module('myreddit') {
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $sce, DataLoader, $rootScope ) {
// Enter your site url here. You must have the WP-API v2 installed on this site. Leave /wp-json/wp/v2/ at the end.
$rootScope.url = 'http://scottbolinger.com/wp-json/wp/v2/';
$rootScope.callback = '_jsonp=JSON_CALLBACK';
})
.controller('PostCtrl', function($scope, $stateParams, DataLoader, $ionicLoading, $rootScope, $sce, CacheFactory, $log, Bookmark, $timeout ) {
if ( ! CacheFactory.get('postCache') ) {
CacheFactory.createCache('postCache');
}
var postCache = CacheFactory.get( 'postCache' );
$scope.itemID = $stateParams.postId;
var singlePostApi = $rootScope.url + 'posts/' + $scope.itemID + '?_embed&' + $rootScope.callback;
$scope.loadPost = function() {
// Fetch remote post
$ionicLoading.show({
noBackdrop: true
});
DataLoader.get( singlePostApi ).then(function(response) {
$scope.post = response.data;
// Don't strip post html
$scope.content = $sce.trustAsHtml(response.data.content.rendered);
$scope.comments = $scope.post._embedded['replies'][0];
// add post to our cache
postCache.put( response.data.id, response.data );
$ionicLoading.hide();
}, function(response) {
$log.error('error', response);
$ionicLoading.hide();
});
}
if( !postCache.get( $scope.itemID ) ) {
// Item is not in cache, go get it
$scope.loadPost();
} else {
// Item exists, use cached item
$scope.post = postCache.get( $scope.itemID );
$scope.content = $sce.trustAsHtml( $scope.post.content.rendered );
$scope.comments = $scope.post._embedded['replies'][0];
}
// Bookmarking
$scope.bookmarked = Bookmark.check( $scope.itemID );
$scope.bookmarkItem = function( id ) {
if( $scope.bookmarked ) {
Bookmark.remove( id );
$scope.bookmarked = false;
} else {
Bookmark.set( id );
$scope.bookmarked = true;
}
}
// Pull to refresh
$scope.doRefresh = function() {
$timeout( function() {
$scope.loadPost();
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
};
})
.controller('PostsCtrl', function( $scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope, $log ) {
var postsApi = $rootScope.url + 'posts?' + $rootScope.callback;
$scope.moreItems = false;
$scope.loadPosts = function() {
// Get all of our posts
DataLoader.get( postsApi ).then(function(response) {
$scope.posts = response.data;
$scope.moreItems = true;
//$log.log(response.data);
}, function(response) {
$log.error(response);
});
}
// Load posts on page load
$scope.loadPosts();
paged = 2;
// Load more (infinite scroll)
$scope.loadMore = function() {
if( !$scope.moreItems ) {
return;
}
var pg = paged++;
$log.log('loadMore ' + pg );
$timeout(function() {
DataLoader.get( postsApi + '&page=' + pg ).then(function(response) {
angular.forEach( response.data, function( value, key ) {
$scope.posts.push(value);
});
if( response.data.length <= 0 ) {
$scope.moreItems = false;
}
}, function(response) {
$scope.moreItems = false;
$log.error(response);
});
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
}, 1000);
}
$scope.moreDataExists = function() {
return $scope.moreItems;
}
// Pull to refresh
$scope.doRefresh = function() {
$timeout( function() {
$scope.loadPosts();
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
};
})
.controller('BookmarksCtrl', function( $scope, $http, DataLoader, $timeout, $rootScope, $log, Bookmark, CacheFactory ) {
$scope.$on('$ionicView.enter', function(e) {
if ( ! CacheFactory.get('postCache') ) {
CacheFactory.createCache('postCache');
}
var postCache = CacheFactory.get( 'postCache' );
if ( ! CacheFactory.get('bookmarkCache') ) {
CacheFactory.createCache('bookmarkCache');
}
var bookmarkCacheKeys = CacheFactory.get( 'bookmarkCache' ).keys();
$scope.posts = [];
angular.forEach( bookmarkCacheKeys, function( value, key ) {
var newPost = postCache.get( value );
$scope.posts.push( newPost );
});
});
})
});
});
为什么它没有显示的任何想法?