Question

我无法为我的生活获取这个json响应，在我的Ionic app的tab-dash视图中呈现。来自本地服务器的响应记录为200，但我无法将json渲染到视图中！我已经按照本教程来构建工厂和控制器http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html，并参考了围绕该主题的stackoverflow问题：

unable to display the http get response from the factory in controller in Angularjs application
Outputting JSON Data from Local Web Server onto Ionic App using Angular
Angularjs $http.get does not work
Angularjs $http.get not working

我已经包含了我的controller.js，负责执行api调用的工厂以及模板代码。提前感谢您提供的任何帮助，我很感激！

controller.js

(function(){

    angular.module('athenaApp.controllers', [])

        .controller('DashCtrl', function($scope, athenaApiService, $timeout) {

            athenaApiService.getArticles().then(function(data){
                $scope.news = data;
           })
      })

}());

services.js

.factory('athenaApiService', function($http){

    return{
        getArticles: function(){
            return $http.get('http://localhost:8000/athenaAPI/articles').then(function(result){
                return result.data;
            });
        }
    }
});

制表dash.html

 <ion-view view-title="News">
  <ion-content>
      <ion-refresher on-refresh="doRefresh()">
      </ion-refresher>
      {{news}}
      <ion-list ng-repeat='article in news'>
        <a class="item item-thumbnail-left" href="#/tab/news/{{article.id}}"> <!-- "#/tab/news/{{article.id}}" -->
          <img src='../img/ionic.png'>
          <div class='item item-text-wrap'>
              <h3>{{article.headline}}</h3>
              <p>{{article.byline}}</p>
          </div>
        </a>
      </ion-list>
  </ion-content>
</ion-view>

服务器输出

Listening on port: 8000
Articles Requested...
[ { id: 0,
    headline: 'Headline 0',
    byline: 'Author 0',
    datePublished: '3/4/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 1,
    headline: 'Headline 1',
    byline: 'Author 0',
    datePublished: '3/5/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 2,
    headline: 'Headline 2',
    byline: 'Author 0',
    datePublished: '3/6/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' },
  { id: 3,
    headline: 'Headline 3',
    byline: 'Author 0',
    datePublished: '3/7/5',
    content: { para0: 'This is a sentence', para1: 'And another sentence.' },
    originalUrl: '' } ]
GET /athenaAPI/articles 200 39.072 ms - 669

Answer 1

结果是一个数组，这就是为什么result.data未定义的原因。直接退还承诺。

getArticles: function(){
        return   $http.get('http://localhost:8000/athenaAPI/articles');
}

Answer 2

抱歉vbordo，我正忙着为你制作一个CodePen，但我找到了一些方法来改善你想要做的事情。 viewContact: function (contactId) { hashHistory.push('/${contactId}'); },通过<ion-list>重复建议最佳做法，我建议使用ion-item构建您的angular.forEach数组，这样您就不会删除角度数组绑定。

请使用您的athena数据服务查看我的工作代码示例和示例JSON数据集。

http://codepen.io/goneale/pen/ONbRrr?editors=1011

无法在离子模板中显示成功的angularjs $ http从本地服务器获取响应

2 个答案: