Javascript 使用post[AngularJS]中的id点击api端点来显示post的图像

我正在尝试从wp json端点检索图像。首先，我需要检索post，并使用post json中的图像id检索相应的图像。我编写的代码是使用指令中的资源、承诺和服务完成的

angular.module("madkoffeeFrontendApp")
  .directive("allarticles", ["articleService", "$q", "mediaService","userService", function(articleService, $q, mediaService,userService) {
    return {
      templateUrl: '../../views/articles.html',
      restrict: 'E',
      link: function(scope) {
        articleService.getArticles().$promise.then(function (argument) {
         scope.articles = argument;
         console.log(scope.articles);
       });

        scope.getImage = function (id) {
           mediaService.getMedia(id).$promise.then(function (argument) {
            console.log(argument.source_url);
             return argument.source_url;
          });
        }

我为getArticles和getMedia提供的服务是：

this.getArticles = function() {
   return articleResource.get();
}
this.getMedia = function(id){
return imgResource.get({fimgId:id});
}

articles.html模板

<div class="col-md-6">
        <article ng-repeat="post in articles" class="post">

          <a href="#" class="post-thumbnail-wrapper">
            <img src="{{getImage(post.featured_media)}}"></img>
          </a>
    </article>
    </div>

---

如何改进此代码？我只需要使用articles.html模板中循环发送的id获取图像。我应该用另一种方法来写这段代码吗？如果是，是什么？有什么解决办法吗？

你已经达到了观察者的极限，AngularJS正在中止。因为你是，你可以简单地改变你的结构。文章是否总是引用其特色图片？所有文章都有相关的特色图片。如果有一种替代结构，您能用plunker或JSFIDLE显示一个演示吗？即使是伪代码也会很好。你能用你的例子和错误设置plunker吗？我会为你建议重组

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.5.0/$rootScope/infdig?p0=10&p1=%5B%5D