Question

我目前正在开始学习Angular.JS，并使用了一些像this one这样的教程。我按照步骤操作，但尝试通过将controllers或services这样的单个部分保存在单独的.js文件中来改进代码，因为我听说这是一个好习惯。这没问题，一切正常。但是当我想出Service提供我的帖子时，我也尝试在Service中编写某种API，因为我在另一个教程中学到了这样做。

出现了问题：获取我的帖子列表的API运行正常但如果我尝试将数据由于addPost函数发送到API，它根本不起作用。

所以你可以帮助我找出问题所在，因为我想在以后post-Service实施一个后端，并希望在一个地方发出所有$http个请求。

修改

下面的代码示例现在正在运行，如果您尝试添加帖子，则可以看到问题。代码在addPost()中的MainCtrl函数之后/期间停止，因为HTML形式的“清除”没有发生。

在这里你可以找到我的代码：

var app = angular.module('flapperNews', []);

app.controller('MainCtrl', function($scope, postService){
    $scope.test = "Hello, World!";

    $scope.posts = postService.getPosts();

    $scope.addPost = function(){
        if(!$scope.title || $scope.title === '') { return; }

        postService.addPost({title: $scope.title, link: $scope.link, upvotes: 0});  
        //This code above was my try ith the API in posts.js

        // $scope.posts.push({
        //    title: $scope.title,
        //    link: $scope.link,    // this whole part is from the tutorial and works fine
        //    upvotes: 0
        //});

        $scope.title = '';
        $scope.link = '';
    };

    $scope.incrementUpvotes = function(post) {
        post.upvotes += 1;
    };
});

app.factory('postService', function() {
    var srv = {};

    srv._posts = [
        {title: 'post 1', link: '', upvotes: 5},
        {title: 'post 2', link: '', upvotes: 2},
        {title: 'post 3', link: '', upvotes: 15},
        {title: 'post 4', link: '', upvotes: 9},
        {title: 'post 5', link: '', upvotes: 4}
    ];

    srv.getPosts = function() {
        return angular.copy(srv._posts);
    };

    srv.addPost = function(post) { //function to put the new Post in the Array
        srv._posts.push(post);
    };

    return {
        getPosts: function() {
            return srv.getPosts();
        },
        addPost: function(post) { //the public API to put the post in the Array
            srv.addPost(post);
        }
    };
});

<!DOCTYPE html>
<html>
<head>
	<meta charset="Utf-8">
	<title>FlapperNews</title>
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">

	<div class="row">
    <div class="col-md-6 col-md-offset-3">

      <div class="page-header">
        <h1>Flapper News</h1>
      </div>

      <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpvotes(post)"></span>
        {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
          <a ng-show="post.link" href="{{post.link}}">
            {{post.title}}
          </a>
          <span ng-hide="post.link">
            {{post.title}}
          </span>
        </span>
      </div>

      <form ng-submit="addPost()"
        style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
          <input type="text"
            class="form-control"
            placeholder="Title"
            ng-model="title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>

    </div>
  </div>
	<!-- Scripts -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src=scripts/app.js></script>
	<script src=scripts/controller/main.js></script>
	<script src=scripts/service/posts.js></script>

</body>
</html>

Answer 1

将数据推送到服务后，您应该更新$ scope.posts

$scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { return; }

   postService.addPost({title: $scope.title, link: scope.link, upvotes: 0});  
   $scope.posts = postService.getPosts(); 

   // or edit postService.addPost so you can make 
  /* $scope.posts = postService.addPost({title: $scope.title, link: scope.link, upvotes: 0});  */


    $scope.title = '';
    $scope.link = '';

};

AngularJS服务的问题

1 个答案: