gpt4 book ai didi

javascript - AngularJS 服务的问题

转载 作者:行者123 更新时间:2023-12-03 08:10:56 25 4
gpt4 key购买 nike

我目前正在开始学习 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>

最佳答案

将数据推送到服务后,您应该更新 $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 = '';

};

关于javascript - AngularJS 服务的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34152057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com