控制器无法下载Wordpress JSON数据

Question

我似乎无法让Wordpress JSON正常工作。我是AngularJS和Ionic世界的新手，所以我一直在阅读和观看教程。

这是我的app.js文件的相关部分：

(function() {
var app = angular.module('mybodyapp', ['ionic', 'angularMoment','LocalStorageModule']);
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url : '/',
        templateUrl : 'index.html',
        controller : 'MainController'
    });
    $stateProvider.state('list', {
        url: '/list',
        templateUrl: 'templates/list.html'
    });
    $stateProvider.state('edit', {
        url: '/edit/:noteId',
        templateUrl: 'templates/edit.html',
        controller: 'EditCtrl'
    });
    $stateProvider.state('add', {
        url: '/add',
        templateUrl: 'templates/edit.html',
        controller: 'AddCtrl'
    });
    $stateProvider.state('notes', {
        url: '/notes',
        templateUrl: 'templates/notes.html'
    });
    $stateProvider.state('posts', {
        url: '/posts',
        templateUrl: 'templates/posts.html',
        controller: 'PostsCtrl'
    });
    $urlRouterProvider.otherwise("/");
});
// ...

我可以通过控制器从Reddit获取数据，但不能从Wordpress获取数据。我找到了一个很好的演示模板，但不知道如何"重写"JS控制器的开头。我去掉了原始angular.module('starter.controllers', [])的顶部，然后放上angular.module('mybodyapp')，后面跟着：

.controller('AppCtrl', function($scope, $timeout, $rootScope) {
    $rootScope.url = 'http://scottbolinger.com/wp-json/wp/v2/';
})
.controller('PostsCtrl', function( $scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope ) {
    console.log('PostsCtrl');
    $scope.loadPosts = function() {
        DataLoader.get( $rootScope.url + 'posts' ).then(function(response) {
            $scope.posts = response.data;
            console.log( response.data );
        }, function(response) {
            console.log('error', response);
        });
    }
    // Load posts on page load
    $scope.loadPosts();
    paged = 2;
    $scope.moreItems = true;
    // Load more (infinite scroll)
    $scope.loadMore = function() {
        if( !$scope.moreItems ) {
            return;
        }
        var pg = paged++;
        $timeout(function() {
            DataLoader.get( $rootScope.url + 'posts' + '?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;
                console.log('error');
            });
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.$broadcast('scroll.resize');
        }, 1000);
    }
    $scope.moreDataExists = function() {
        return $scope.moreItems;
    }
    // Pull to refresh
    $scope.doRefresh = function() {
        console.log('Refreshing!');
        $timeout( function() {
            $scope.loadPosts();
            //Stop the ion-refresher from spinning
            $scope.$broadcast('scroll.refreshComplete');
        }, 1000);
    };
})
.controller('PostCtrl', function($scope, $stateParams,     DataLoader,    $ionicLoading, $rootScope, $sce ) {
    $ionicLoading.show({
        noBackdrop: true
    });
    var singlePostApi = $rootScope.url + 'posts/' +    $stateParams.postId;
    DataLoader.get( singlePostApi ).then(function(response) {
        $scope.post = response.data;
        // Don't strip post html
        $scope.content =    $sce.trustAsHtml(response.data.content.rendered);
        $ionicLoading.hide();
    }, function(response) {
        console.log('error', response);
    });
  });

Answer 1

ng-app指令中的名称必须与模块名称匹配。ng-controller指令中的名称必须与控制器名称匹配。

有关ng-app指令的更多信息，请参阅AngularJS ng-app API参考。

对于ng-controller指令，AngularJS ng-controller API参考

更新

您获取的演示有三个控制器。你需要让他们成为angular.module 的方法

angular.module('mybodyapp').controller('AppCtrl',... 
angular.module('mybodyapp').controller('PostsCtrl', function( $sc
angular.module("mybodyapp").controller('PostCtrl', function($scope