2015-11-23 40 views
0

我對JS世界有點新鮮,所以我在努力解決我做錯了什麼。我的wordpress API示例數據無效。任何想法我做錯了:Ionic/AngularJS&Wordpress API

app.controller('FeedCtrl', function($http, $scope,  $ionicLoading) { 
    console.log("Loading FeedCtrl"); 

    $scope.stories = []; 

    function loadStories(params, callback) { 
    $http.get('http://public-api.wordpress.com/rest/v1/freshly-pressed/', {params: params}) 
    .success(function(response) { 
    var stories = []; 
    angular.forEach(response.data.children, function(child) { 
     stories.push(child.data); 
    }); 
    callback(stories); 
    }); 
    } 

    $scope.loadOlderStories = function() { 
var params = {}; 
if ($scope.stories.length > 0) { 
    params['after'] = $scope.stories[$scope.stories.length - 1].name; 
} 
loadStories(params, function(olderStories) { 
    $scope.stories = $scope.stories.concat(olderStories); 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
}); 
    }; 

    $scope.loadNewerStories = function() { 
var params = {'before': $scope.stories[0].name}; 
loadStories(params, function(newerStories) { 
    $scope.stories = newerStories.concat($scope.stories); 
    $scope.$broadcast('scroll.refreshComplete'); 
    }); 
    }; 

回答

0

我已經做了一個簡單的例子與您的數據。

點擊「加載更多」按鈕檢索一些帖子。你應該看到一個包含標題和帖子作者的列表。

編輯:似乎有一些跨域請求問題,這就是爲什麼'Load stories'按鈕不起作用。試着在你的控制器裏反映這個代碼,它應該可以工作。

var app = angular.module('myApp', []); 
 

 

 
app.controller('feedCtrl', function ($scope, $http) { 
 
    $scope.stories = []; 
 

 
    $scope.loadStories = function loadStories() { 
 
     console.log('loading stories'); 
 
     $http.get('http://public-api.wordpress.com/rest/v1/freshly-pressed/') 
 
     .then(function onSuccess(response) { 
 
      console.log(response); 
 
      $scope.stories = response.data.posts; 
 
     }, function onFailed(error) { 
 
      console.error('Error:', error) 
 
     }); 
 
    
 
    } 
 
});
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    
 
    <div ng-controller="feedCtrl"> 
 
    <button data-ng-click="loadStories()">Load stories</button> 
 

 
    <ul> 
 
     <li data-ng-repeat="story in stories">Title: {{ story.title }} - {{ story.author.first_name }} {{ story.author.last_name }}</li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 
</html>

通常我們不會處理$ HTTP在我們angular.controller調用。這需要在angular.service中完成。

+0

似乎沒有加載任何數據。我錯過了什麼嗎?抱歉。 –

+0

你能檢查你的控制檯是否有任何錯誤?也許你會得到這樣的:'XMLHttpRequest無法加載'。 – mhx

+0

沒有看到任何javascript錯誤,只有幾個CSS問題。 –