Thinkster MEAN 堆栈工厂

Question

我正在学习 Thinkster.io MEAN Stack 教程，并且对为什么我的实现不起作用有疑问。我知道这不是真正要问的问题，但想知道您将如何完成这项工作。我想用工厂来展示我从控制器搬进我工厂的帖子。 app.js 的代码如下所示。

`

var app = angular.module('flapperNews', []);

app.factory('posts', [function(){
var o = {posts:[{title: 'post 1', upvotes: 5}, {title: 'post 2', upvotes: 2},  {title: 'post 3', upvotes: 15}, {title: 'post 4', upvotes: 9},{title: 'post 5', upvotes: 4}];
};
return o;
}]);

app.controller('MainCtrl', ['$scope', 'posts',function($scope, posts){
  $scope.test = 'Hello world!';
  $scope.posts = posts.posts; 
  $scope.addPost = function(){
    if(!$scope.title || $scope.title === ''){
     return; 
    }
    $scope.posts.push({title: $scope.title, link: $scope.link, upvotes: 0}); 
    $scope.title = '';
    $scope.link = '';
    };
  $scope.incrementUpvotes = function(post){
    post.upvotes += 1; 
  };

}]);

`

原来工厂里post的对象在controller里是$scope.posts。现在它在工厂（被引用为 posts.posts）并且不显示。您将如何在 html 中显示数组，因为我在主控制器 div 下有 {{post.title}}，在引入工厂之前可以使用 ng-repeat。

Answer 1

您的 JSON 数据格式不正确。在数组 posts 之后的 JSON 数据中有一个分号。

使用它应该可以工作：

var o = {
    posts: [{
        title: 'post 1',
        upvotes: 5
    }, {
        title: 'post 2',
        upvotes: 2
    }, {
        title: 'post 3',
        upvotes: 15
    }, {
        title: 'post 4',
        upvotes: 9
    }, {
        title: 'post 5',
        upvotes: 4
    }]
};

Thinkster MEAN 堆栈工厂

Thinkster MEAN Stack Factory

factory

angularjs

mean.io