0
Thinkster (https://thinkster.io/mean-stack-tutorial)의 MEAN 자습서를 따르고 있으며 route 매개 변수 전달에 대한 해결책을 찾을 수 없습니다.thinkster에 대한 MEANStack 안내서, 경로 매개 변수가 작동하지 않습니다.
내 문제는
나는 게시물의 댓글을보고 싶어 (https://thinkster.io/mean-stack-tutorial#the-posts-page)
(내 URL에서 경로 매개 변수를 전달하여) 자습서의이 섹션에서 제공됩니다. 튜토리얼의 내용은 다음과 같습니다.지금은 해당 게시물의 색인을 해당 ID로 간주합니다. $ stateParams를 사용하여 URL에서 ID를 검색하고 해당 게시물을로드 할 수 있습니다. 나는 내가 잘못 무슨 생각이
$scope.post = posts.posts[$stateParams.id]; <span> <a href="#/posts/{{$index}}">Comments</a> </span>한 :
folowing 코드를 사용하지 않습니다. 하지만 내 코드가 PostCtrl 컨트롤러를 통과한다고 생각하지 않습니다.
사람은 내가 잘못 알고?`
<html>
<head>
<title>Flapper News</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="app.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<!-- Waar de template moet geplaatst worden in actieve state !-->
</div>
</div>
<!-- Home state !-->
<script type="text/ng-template" id="/home.html">
<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>
<span>
<a href="#/posts/{{$index}}">Comments</a>
</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>
</script>
<!-- Posts state !-->
</script>
<script type="text/ng-template" id="/posts.html">
<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.comment | 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>
</script>
<!-- Andere state !-->
</body>
</html>
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$stateProvider.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
]);
/* We creeeren een nieuw object dat een property posts heeft.
We geven dan die variabele (o) terug zodat deze door elke angular module kan gebruikt worden.
Je kan hier ook methode in exporteren
$scope.posts = posts.posts in MainCtrl --> Nu wordt elke wijziging opgeslaan in de service*/
app.factory('posts', [function() {
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope', 'posts',
function ($scope, posts) {
$scope.posts = posts.posts
$scope.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
}];
$scope.addPost = function() {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [{
author: 'Joe',
body: 'Cool post!',
upvotes: 0
}, {
author: 'Bob',
body: 'Great idea but everything is wrong!',
upvotes: 0
}]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function (post) {
post.upvotes += 1;
};
}
]);
app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
'post',
function ($scope, $stateParams, posts, post) {
$scope.post = posts.posts[$stateParams.id];
}
]);
thinkster.io에 연락하기를 원할 수도있는 답변입니다. 나는 그들이 감사 할 것이라고 확신한다. –