0
Итак, я следую вместе с thinkster.io MEAN stack tutorial, и я завершил все до «Начального узла», но мое приложение работает не так, как ожидалось.Угловая фабрика не работает?
При просмотре комментариев сообщения, похоже, что фабрика неправильно делится своей переменной. Заголовок (и ссылка, если он присутствует в этой записи после записи) не отображается, а также комментарии (если эта запись записи связана с комментариями).
Я просмотрел свой код несколько раз и убедился, что он следует за учебником, но я не могу заставить его работать! Что я делаю не так?
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