angularjs - 在模板文件中从数据库获取数据时遇到问题

Question

我正在构建一个类似于结构化Web应用的博客AngularJS。我试图检索用户是一个职位的其他职位，并检索他们的显示名称动态检索，因为它遍历所有帖子，但我似乎无法正确检索数据..这是我迄今为止所做的。

博客控制器：

uno.controller('newsCtrl', function($scope, $http, adbFactory){ 
    $scope.derp = 'derp!!!!!'; 
    adbFactory.get($http, 'get users 1', false).success(function(data){ 
     $scope.user = data; 
    }).error(function(){ 
     console.log('Errorrr'); 
    }); 

    $scope.init = function(){ 
     adbFactory.get($http, 'get all blog_posts', true).success(function(data){ 
      $scope.posts = data; 
      console.log($scope.posts); 
     }); 
    }; 

    $scope.getAuthor = function(_id) { 
     adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){ 
      //$scope.author = data; 
      //console.log($scope.author); 
      return data; 
     }); 
    }; 
}); 

如果我CONSOLE.LOG它显示了完美的用户给出的作者ID是在数据库中的数据，但是当我尝试调用使用“{{在getAuthor功能}}'范围我得到一个错误的拼贴画...继承人我的博客模板下面。

博客模板：

<div class="large-12 small-12 columns" ng-init="init()"> 
    <div class="row"> 
     <div class="large-12 small-12 columns" ng-repeat="topic in posts" style="margin-bottom:20px;"> 
      <div id="news-post" class="panel animated fadeInUp"> 
       <div class="row" ng-init="getAuthor(topic.author_id)"> 
        <div class="large-2 small-2 columns"> 
         <img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:100px; width: 150px;" /> 
        </div> 
        <div class="left large-10 small-10 columns"> 
         <div class="row"> 
          <h2 class="post-title"><a href="#/news/post/{{ topic['id'] }}">{{topic['title']}}</a> <p>Posted By, {{ getAuthor(topic.author_id).email }}</p></h2> 
          <p>{{ topic['body'] }}</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <hr> 
    </div> 
</div> 

搞不清这个问题可能是什么..任何事情我失踪？

更新:: 我最近更新我的控制器和工厂得到处理我的数据流更好的范围，我的控制器现在看起来是这样的：

uno.controller('newsCtrl', function($scope, $http, adbFactory, $cacheFactory, unoFunctions){ 
    $scope.init = function(){ 
     adbFactory.get($http, 'get all blog_posts', true).success(function(data){ 
      $scope.posts = data; 

      $scope.getUser = function(_id) { 
      $scope.userData = unoFunctions.getUser(_id); 
       //console.log($scope.userData); 

       return $scope.userData; 
      }; 
     }); 

     $scope.getTags = function(_id) { 
      var post = unoFunctions.getPost(_id); 
      var _tags = post.tags.split(','); 
      for(var i = 0; i < _tags.length; i++) 
      { 
       _tags[i] = _tags[i].trim(); 
      } 

      return _tags; 
     }; 

     $scope.getUserName = function(_id) { 
      $scope.userData = unoFunctions.getUser(_id); 
      return $scope.userData.display_name; 
     }; 

     $scope.getUser = function(_id) { 
      $scope.userData = unoFunctions.getUser(_id); 
      //console.log($scope.userData); 
      return $scope.userData; 
     }; 

     $scope.getUserName = function(_id) { 
      $scope.userData = unoFunctions.getUser(_id); 
      return $scope.userData.display_name; 
     }; 
    }; 
}); 

的unoFunctions厂是西隧我现在用它来处理来自我的数据库的某些请求，如下所示。

uno.factory（ 'unoFunctions'，函数（adbFactory，$ HTTP，$ cacheFactory）{ VAR事实= {};

var user = $cacheFactory('user'); 
var post = $cacheFactory('post'); 

fact.getUser = function(_id) { 
    if(!user.get(_id)){ 
     adbFactory.get($http, 'get users id '+_id+' spec', false).success(function(data){ 
      user.put(_id, data); 
     }); 
    } 

    return user.get(_id); 
}; 
fact.getPost = function(_id) { 
    if(!post.get(_id)) 
    { 
     adbFactory.get($http, 'get blog_posts id '+_id+' spec', false).success(function(data){ 
      post.put(_id, data); 
     }); 
    } 

    return post.get(_id); 
}; 

fact.loggedIn = function() 
{ 
    console.log('gfdg'); 
}; 

/*------------------------------*/ 
return fact; 

}）;

而我的模板来输出结果是这样的：

<div class="large-12 small-12 columns" ng-init="init()"> 
    <div class="row"> 
     <div class="large-12 small-12 columns" ng-repeat="topic in posts | filter:postTitle | orderBy:'-time' " style="margin-bottom:20px;"> 
      <div id="news-post" class="panel animated fadeInUp" ng-init="getTags(topic.id)"> 
       <div class="row" style="padding-bottom:0px;"> 
        <div class="large-2 small-2 columns"> 
         <img src="{{ topic['thumb'] }}" alt="" style="border-radius:50%; height:120px; width: 200px;" /> 
        </div> 
        <div class="left large-10 small-10 columns"> 
         <div class="row" style="padding-bottom:0px;"> 
          <h2 class="post-title"> 
          <a href="#/news/post/{{ topic['id'] }}"> 
          {{topic['title']}} 
          </a> 
          <p style="font-size:13px; font-style:italic; color:#a5a5a5" class="right">{{ topic.time | timeago }} {{ }}</p> 
          <p style="font-weight:bold; font-style:italic; color:#aaa">Posted By, {{ getUser(topic.author_id).display_name }}</p></h2> 
          <p>{{ topic['body'] }}</p> 
          <div ng-repeat="tag in getTags(topic.id)"><span style="background:#ccc; margin:7px; padding:4px; border-radius:5px; font-size:12px" class="left">{{ tag }}</span></div> 
          <p class="right" style="background:#dedede; font-size:13px; padding:7px; border-radius:6px; color:#1985A1;">{{ topic.category }}</p 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

能正常工作并返回我在寻找所需要的结果，但我想摆脱无数错误的：[$rootScope:infdig]错误，让我的控制台干净..我研究了错误，它似乎是因为当我从unoFunctions工厂调用函数，如getUser或getPost。它每次都会返回一个新的数组，或者类似于我猜测的东西超出范围的东西。我不完全确定，这是为什么？

Answer 1

这种结合

<p>Posted By, {{ getAuthor(topic.author_id).email }}</p> 

假设getAuthor返回一个对象，但它没有，即使有合适的return说法 - 因为异步请求发生，并adbFactory链显然将返回一个承诺，而不是一个对象。并且每次做adbFactory.getgetAuthor绑定正在被监视将会是糟糕的性能 - json结果必须不断地被解析，即使使用$http缓存。

缓存和服务结果绑定到范围适当的解决方案（和先导，以全面的模型）是

var authors = $cacheFactory('authors'); 
$scope.getAuthor = function(_id) { 
    if (!authors.get(_id)) { 
     authors.put(_id, {}); 
     adbFactory.get($http, 'get users id ' +_id+ ' spec', false).success(function(data){ 
      authors.put(_id, data); 
     }); 
    } 

    return authors.get(_id); 
};