在 AngularJS 中访问特定的 json 数据

Question

我有一个包含文章信息的 json 文件，其中每篇文章都有一个 ID。这是它的格式：

[{"title":"ISIS No. 2 killed in US special ops raid",
  "id":"14589192090024090",
  "agency":"foxnews",
  "text":"Article text goes here.",
  "topic":"Politics",
  "imagePath":"resources\/images\/foxnews\/14589192090024090.img.jpg"},
 {"title":", etc etc }]

在我的主页上，我有一个显示标题和作者的列表视图，当您单击文章时，我希望它显示文本、主题等。我用于请求 json 的 angularJS 工厂如下所示：

var trooNewsServices = angular.module('trooNewsServices', ['ngResource']);

  trooNewsServices.factory('Articles', ['$resource',
  function($resource){
    return $resource('resources/articles.json');
  }]);

我通过以下方式访问主页控制器中的完整文章列表：

this.articles = Articles.query();

我正在努力解决的是当我单击特定文章时，我希望下一页显示该文章信息。我试图通过使用 $routeParams.id 获取特定的 id，然后在 json 中查找 id 来做到这一点。这是我选择的文章控制器中的代码：

TrooNews.controller('ArticleController', ['$routeParams','Articles',
    function($routeParams, Articles) {

        //look through articles for specific article using routeparams
        Articles.query().$promise.then(function(articles) {

            for(i = 0; i < articles.length; i++){

                if(articles[i].id===$routeParams.id){
                    this.selectedArticle=articles[i];
                }

            }

        });

        console.log(selectedArticle);
}]);

我收到错误消息“无法实例化控制器 ArticleController”。如何在 promise 函数之外访问我的 selectedArticle 变量？

Answer 1

TrooNews.controller('ArticleController', ['$routeParams','Articles',
    function($routeParams, Articles) {
       var parent = this;
       parent.selectedArticle = null;
       parent.setSelectedArticle = function(article){
          parent.selectedArticle = article;
       }
       //look through articles for specific article using routeparams
       Articles.query().$promise.then(function(articles) {
          for(i = 0; i < articles.length; i++){
            if(articles[i].id===$routeParams.id){
                parent.setSelectedArticle(articles[i])
                break;
            }
        }
    }); 
}]);

Answer 2

您正在进行异步调用，因此不要指望在您调用它后立即显示结果。使用回调方法：

Articles.query().then(function(articles){

    for(i = 0; i < articles.length; i++){
        if(article[i].id===id){
            selectedArticle=article;
        }
    }

    console.log(selectedArticle);
})

或者您可以在回调调用中强制使用范围摘要。