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); 
};