0
所以我跟着thinkster.io MEAN stack tutorial一直跟着我完成了一切，直到“开始节点”，但我的应用程序没有按预期工作。AngularJS工厂不工作？
查看帖子的评论时，似乎工厂没有正确分享其变量。标题（和链接，如果存在于该帖子记录中）不显示，也不显示评论（如果该帖子记录具有相关评论）。
我已经查看了我的代码几次，并确保它遵循教程，但我无法让它工作！我究竟做错了什么？
indexV2.html
<html>
<head>
<title>My Angular App!</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="appV3.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- where ui-router places templates, depending on the state -->
<ui-view></ui-view>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<!-- begin home.html inline template -->
<div class="page-header">
<h1>Flapper News</h1>
</div>
<form ng-submit="addPostV2()">
<div class="form-group">
<input class="form-control" type="text" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Add Post</button>
</form>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
<a href="{{post.link}}" ng-show="post.link">{{post.title}}</a>
<span ng-hide="post.link">{{post.title}}</span>
- upvotes: {{post.upvotes}}
- <span>
<a href="#/posts/{{$index}}">Comments</a>
</span>
</div>
</script>
<script type="text/ng-template" id="/posts.html">
<!-- begin posts.html inline template -->
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
<form ng-submit="addComment()" style="margin-top:30px;">
<h3>Add a new comment</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Comment" ng-model="body"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>
appV3.js
// instantiate app, call it flapperNews, and declare the ui.router dependency
var app = angular.module('flapperNews', ['ui.router']);
// Set up states using the config function
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', { // homepage state
url: '/home',
templateUrl: '/home.html', // specify template (will be inline, in index.html, for this example)
controller: 'MainCtrl' // assign a controller
})
.state('posts', { // state that will display comments associated with a post
url: '/posts/{id}', // id is a route parameter, made available to our controller
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home'); // redirect unspecified routes
}
]);
// factory that will share the posts array with controllers
app.factory('posts', [function() {
var o = { // create object that will hold our posts array
posts: []
};
return o;
}]);
// controller for "home" state
app.controller('MainCtrl', [
'$scope',
'posts', // inject service into controller (by adding it as a parameter)
function($scope, posts) {
// bind (not just assign) the service variable to our scope
// any changes in either will be reflected in the other
$scope.posts = posts.posts;
$scope.posts = [ // array of objects
{title: 'post 1', upvotes: 3, url: ''}, // object (collection of properties) with 2 properties
{title: 'post 2', upvotes: 4, url: ''},
{title: 'post 3', upvotes: 1, url: ''},
{title: 'post 4', upvotes: 2, url: ''},
{title: 'post 5', upvotes: 6, url: ''}
];
$scope.addPostV2 = function() {
if(!$scope.title || $scope.title === '') { // if empty or not set
return; // exit function
}
$scope.posts.push({ // push new object into array
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [ // fake array
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = ''; // empty the property (the model in the form)
$scope.link = '';
}
$scope.incrementUpvotes = function(post) { // pass the instance of post (passed in calling function, by reference - located in HTML)
post.upvotes += 1;
}
}
]);
// new controller for "posts" state
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id]; // Grab a post from posts, using the id parameter from $stateParams (in URL)
$scope.addComment = function() {
if($scope.body === '') {
return;
}
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
}
$scope.incrementUpvotes = function(comment) {
comment.upvotes += 1;
}
}
]);
感谢您的帮助提前
什么不工作？ – Sajeetharan
我道歉@Sajeetharan，我在第二段中给我的问题添加了更多细节。实际上，虽然home.html模板可以正确引用posts对象并在模板中显示其属性，但posts.html模板不能。 – CFitz