Question

我正在关注Thinkster（https://thinkster.io/mean-stack-tutorial）的MEAN教程，但无法找到传递路径参数的sollution。

我的问题来自教程中的这一部分（https://thinkster.io/mean-stack-tutorial#the-posts-page）

当我想查看帖子的评论时（通过在我的URL中传递route参数）。教程说：

目前，我们会将帖子的索引视为其ID。我们可以使用$ stateParams从URL中检索id并加载相应的帖子。

使用以下代码：

$scope.post = posts.posts[$stateParams.id];
<span>
  <a href="#/posts/{{$index}}">Comments</a>
</span>

我不知道我做错了什么。但我不认为我的代码通过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];
    }
]);

Answer 1

您已在$scope.posts中重新声明 MainCtrl，因此MainCtrl中的更改永远不会反映在您的posts工厂中。< / p>

问题在于：

 $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.posts设置为等于您的工厂对象，第二个是将其设置为本地数组。

您应该使用push将数据添加到工厂数组中。

$scope.posts = posts.posts;

$scope.posts.push({
  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
});

此外，您PostsCtrl还有一次额外注射，没有注入post服务。

代码的完整工作副本及相关更改位于plnkr。

关于thinkster的MEANStack教程，路由参数不起作用

1 个答案: