用id获取角度的文章

Question

我对离子和角度都很陌生，不能按id获得文章，我从api中获得文章列表，这很有效，但是用id获取文章是行不通的。这是我的密码：

主计长：

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

.controller('FrontPageController', function($scope, ArticleService) {
  ArticleService.all().then(function(data){
    $scope.articles = data;
  })
})

.controller('ArticleController', function($scope, ArticleService, $stateParams) {
  var article = ArticleService.get($stateParams.id);
});

服务：

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

  return {
    all: function() {
       return $http.get("http://myApp.app/api/articles/latest").then(function(response){
             articles = response.data;
             return articles;
          });
       },
    get: function(id) {
      var articles = this.all();

      for (var i in articles) {
        if (articles[i].id == id) {
          return articles[i];
        }
      }

      return {};
    }
  };
});

并列出意见：

<ion-item ng-repeat="article in articles" href="#/main/article/{{article.id}}">
        <div class="list card">
        <div class="item item-avatar">
          <h3>{{ article.title }}</h3>
          <div ng-repeat="media in article.medias">
            <img src="http://myApp.app/{{media.path}}">
            <p>{{media.path}}</p>
          </div>
        </div>
        <div class="item item-body">
          <img class="full-image" src="http://myApp.app/{{media.path}}">
          <p>
            This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
            the content is from a card-body consisting of an image and paragraph text. The footer
            consists of tabs, icons aligned left, within the card-footer.
          </p>
          <p>
            <a href="#" class="subdued">1 Like</a>
            <a href="#" class="subdued">{{ article.commentsCount }} Comments</a>
          </p>
        </div>
      </div>
      </ion-item>

当我在console.log($scope.articles)中执行FrontPageController时，对象列表就是这样的(我只展示了第一个对象的样子)：

Object {1: Object, 2: Object, 3: Object, 4: Object, 5: Object, 7: Object, 32: Object, 33: Object, 50: Object}
1
:
Object

对象包含的值如下所示：

category_id:1
commentsCount:3
created_at:"2016-05-10 13:56:45"
id:1
medias:Array[0]
slug:"-11"
summary:"dsvsdv"
text:"<p>sdvsdv</p>"
title:"sdvsdv"
type_id:1
updated_at:"2016-06-02 08:19:46"
user_id:3
__proto__

当我在console.log(article)中使用ArticleController时，会得到空对象。对于console.log(articles) in get: function in services，我得到：

Promise {$$state: Object}
$$state

更新代码

如果将来有人需要的话，这对我来说是有效的。

服务：

get: function(id) {
      return this.all().then(function(response) {
      var articles = response;
      for (var i in articles) {
        if (articles[i].id == id) {
          return articles[i];
        }
      }
      return {};
      })
    }

主计长：

.controller('ArticleController', function($scope, ArticleService, $stateParams) {
  ArticleService.get($stateParams.id).then(function(response) {
    $scope.article = response;
  })
});

Answer 1

在我看来，对象是空的，因为您使用了异步方法。当您调用this.all()方法时，它会向端点发送一个HTTP请求。此操作需要时间，在此期间，articles是未定义的，因此您不会进入for循环。

试试这个：

var articles = this.all().then(function(response) {
      var articles = response;
      angular.forEach(articles, function(article){
        if (article.id == id) {
          return article;
        }
      }
      return {};
})

根据AngularJS文档，一旦结果可用，就会异步调用成功或错误回调之一。所以这次文章不会是空的。