Angular ng-repeat 不适用于从 mongodb 获取的数据

Question

我是网络开发新手。如果这是一个愚蠢的问题，我深表歉意。我的 ng-repeat 不显示从 mongodb 获取的 JSON，但当我传递本地 JSON 时它起作用了。我为此奋斗了一整天。谁能告诉我哪里出了问题？

这是我的 Angular 代码

(function(){
  var app = angular.module('app', ['ngRoute']);
  app.controller('CommentController', ['$scope', '$http', function($scope, $http){

//I've tried 'this.comment', it still not work.
//It works when I use a test local JSON'this.comment = [{Visitor: 123, Comment: 345, CreateDate: 879}, {Visitor: 123, Comment: 345, CreateDate: 879}]
    $scope.comment = 
    $http({url: 'db-comments'}).success(function (comments) {

//I've confirmed 'comments' is an array of the JSON objects which I want.

      return comments;
    });
  }]);
})();

这是我的 HTML 代码

<div id="home" class="container" ng-controller='CommentController as comments'>
  <div id="comment" ng-repeat="x in comments.comment">
    <h2>{{x.Visitor}}</h2>
    <hr>
    <p>{{x.Comment}}<p>
    <span>{{x.CreateDate}}</span>
    <hr>
  </div>
</div>

这是我的 node.js 代码

router.get('/db-comments', function(req, res, next){
  Comment.find(function(err, data){
    if(err){
        console.log('can not fetch the data')
    }
    res.send(data);
  })
});

提前致谢！

Answer 1

$http returns 承诺，在 'then' 部分设置范围变量。

示例：

       $http({url: 'db-comments'})
       then(function(response) {                    
          $scope.comment = response.data.
       }, function(response) {                  
          console.log('error: ' + response.error);
       });

Answer 2

我真的不知道 $http 服务如何在 AngularJS 上运行，但我猜它 returns 是一个承诺吧？

虽然我对promises不是很熟悉，但是我建议你这样做：

(function() {
var app = angular.module('app', ['ngRoute']);
app.controller('CommentController', ['$scope', '$http', function($scope, $http) {

  $http({
    url: 'db-comments'
  }).success(function(response) {

      // Bind the variable here
      $scope.comment = response.data;

    });
  }]);
})();

我希望这对你有用，如果不行，请告诉我。祝你好运！

Answer 3

正如 scottseeker 指出的那样，您需要将 http 响应数据分配给您的变量，而不是承诺。

但是，因为您使用的是 controller as 语法，所以这不足以让您的示例正常工作。您需要设置 this.comment 而不是 $scope.comment。一开始，你可能想写这样的东西：

$http(...).success(function (comments) {
    this.comment = comments;  // don't write that
});

但请注意，回调中的关键字 this 与外部引用的 this 不同。所以如果你使用controller as语法，习惯在你的controller开头写var vm = this;，然后在vm里面设置你要绑定的变量到视图（vm 代表 viewmodel）。像那样：

app.controller('CommentController', ['$http', function ($http) {
    var vm = this;

    $http({url: 'db-comments'}).success(function (comments) {
        vm.comment = comments;
    });
}]);

附带说明一下，如果您没有为 $http 调用设置特定的 headers，我建议您使用简短方法 $http.get。这更具可读性：

$http.get('db-comments').success(...)

Angular ng-repeat 不适用于从 mongodb 获取的数据

Angular ng-repeat doesn't work with data fetched from mongodb

javascript

mongodb

node.js

angularjs

ng-repeat