Question

尝试学习Angular / Rails基础知识，我在这个AngularJS网络应用教程的这个页面上：https://thinkster.io/tutorials/angular-rails/creating-the-single-post-view

我遇到了一个问题，我花了不少时间倾盆而下，但由于我的JavaScript知识有限且我的Angular经验没有，我得出的结论是我永远不知道我和我＃39;做错了。

我的主视图/控制器工作正常，但当我点击帖子上的评论时，它永远无法正确提取数据。你可以在这里看到它的演示不起作用：http://joshmccord.com/demo/webapp/#/home - 只需点击评论并看到它已损坏。

这是app.js的代码：

angular.module('flapperNews', ['ui.router'])
.config([
  '$stateProvider',
  '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $stateProvider
      // Make sure only last state has ending semicolon
      .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl'
      })

      .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'PostsCtrl'
      });

    $urlRouterProvider.otherwise('home');
  }
])

.factory('posts', [function() {
  // Service Body
  var o = {
    posts: []
  };
  return o;
  // End Service Body
}])

// Make sure only last controller has ending semicolon
.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
  // Bind $scope.posts to factory/services 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;
  };
}])

.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
  $scope.post = posts.posts[$stateParams.id];

  $scope.addComment = function(){
    if($scope.body === '') { return; }
    $scope.post.comments.push({
      body: $scope.body,
      author: 'user',
      upvotes: 0
    });
    $scope.body = '';
  };
}]);

最后这里是index.html：

<html>
  <head>
    <title>My Angular App!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
    <link rel="stylesheet" href="app.css">
    <script src="https://use.fontawesome.com/e1c22672d7.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> <!-- http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js -->
    <script src="app.js"></script>
  </head>
  <body ng-app="flapperNews">

    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Flapper News</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
    </div>

    <div class="row mainView">
      <div class="medium-6 medium-offset-3 columns">
        <ui-view/>
      </div>
    </div>

    <script type="text/ng-template" id="/home.html">
      <div ng-repeat="post in posts | orderBy: '-upvotes'" class="postList">
        <span class="fa fa-thumbs-up" ng-click="incrementUpvotes(post)"></span>
        <a ng-show="post.link" href="{{post.link}}">
          {{post.title}}
        </a>
        <span ng-hide="post.link">
          {{post.title}}
        </span>
        <span>
          <a href="#/posts/{{$index}}">Comments</a>
        </span>
        - Upvotes: {{post.upvotes}}
      </div>

      <form ng-submit="addPost()" class="addPost">
        <h4>Add A Post</h4>
        <input type="text" placeholder="Title" ng-model="title">
        <input type="text" placeholder="Link" ng-model="link">
        <button type="submit" class="button expanded">Post</button>
      </form>
    </script>

    <script type="text/ng-template" id="/posts.html">
      <h3>
        <a ng-show="post.link" href="{{post.link}}">
          {{post.title}}
        </a>
        <span ng-hide="post.link">
          {{post.title}}
        </span>
      </h3>

      <div ng-repeat="comment in posts.comments | orderBy:'-upvotes'">
        <span class="fa fa-thumbs-up" ng-click="incrementalUpvotes(comment)"></span>
        {{comment.upvotes}} - by {{coment.author}}
        <span style="font-size: 20px; margin-left: 10px;">
          {{comment.body}}
        </span>
      </div>

      <form ng-submit="addComment()" class="addComment">
        <h4>Add A Comment</h4>
        <input type="text" placeholder="Comment" ng-model="body">
        <button type="submit" class="button expanded">Post</button>
      </form>
    </script>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>

  </body>
</html>

这个Angular Web应用程序教程是否存在故障？

0 个答案: