Angular - 按身份

时间:2016-06-03 06:23:29

标签: angularjs ionic-framework angular-ui-router

我是离线和棱角分明的新手并且无法通过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__

Object包含如下值:

console.log(article)

当我在ArticleControllerconsole.log(articles)时,我得到了空物。 对于get: function 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;
  })
});

控制器:

TableRow.LayoutParams params = new TableRow.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
int margin = 10;
params.setMargins(margin, margin, margin, margin);

View view = new Button(this);
view.setTextSize(textSize);

view.setScaleY(textSize / defaultTextSize);
view.setOnClickListener(new View.OnClickListener() { ... });

view.setLayoutParams(params);
view.setText("\u2193");

1 个答案:

答案 0 :(得分: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文档,然后会在结果可用时异步调用其中一个成功或错误回调。因此这篇文章不会是空的。