Question

我正在构建我的第一个MEAN twitter应用程序，目前正尝试显示gui的帖子列表。我目前所做的是：

angular.js部分：

在main.js：

中

angular.module('MyApp')
  .controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
        $scope.feeds = Feed.showFeeds();
// ... 
}

在feed.js：

中

angular.module('MyApp')
    .factory('Feed', ['$http', '$location', '$rootScope', '$cookieStore', '$alert', '$resource',
        function ($http, $location, $rootScope, $cookieStore, $alert, $resource) {
    return {
      // other functions like addFeed: function(f) {...},
      showFeeds: function() {
        return $http.get('/api/feeds');
      }

node.js部分：

app.get('/api/feeds', function (req, res, next) {
    var query = Feed.find();
    query.limit(8);
    query.exec(function (err, feeds) {
        if (err) return next(err);
        res.send(feeds)
        // feeds is a corret JSON with all my data at this point
    });
});

和我的home.html：

 <p>{{ feeds }}</p> <!-- for testing - this just returns {} -->
 <div ng-repeat="feed in feeds">
 <div>
     <a href="/feeds/{{feed._id}}">{{feed.feedMessage}}</a>
 </div>

所以我的问题是：一切都很好，但没有任何东西在页面上呈现，我没有得到任何错误，只是我的$scope.feeds对象是空的。我对此很新，所以也许这是一个明显的错误，但如果有人能指出我正确的方向，那就太棒了！

Answer 1

现在你要返回一个承诺，你需要访问数据。：

Feed.showFeeds().success( function(data) { 

    $scope.feeds = data.feeds;

});

Answer 2

由angular返回提供的'$ http'服务始终是'$ q'的实例，另一个角度服务允许我们对所有异步命令使用 Promise 语法。

当您将Feed.showFeeds()的返回值分配给范围变量时，您将一个承诺绑定到您的视图，而Angular无法显示它。

您应该使用$http提供的成功方法来获取服务器数据并将其绑定到您的范围变量，例如 bencripps 。

注意：成功方法（和错误）是$http的特定方法，并调用角度的$digest method，它会自动触发视图刷新。

angular.module('MyApp')
  .controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
        $scope.feeds = [];
        Feed.showFeeds().success(function(data) { 
           //depends of the json return 
           //try a console.log(data)
           $scope.feeds = data.feeds
        });

// ... 
}

使用NodeJS加载的AngularJS显示数据

2 个答案: