Posts are not displaying


#1

Ok I am stumped. The button is working but the posts are not showing up.

Index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
    <link href="css/main.css" rel="stylesheet">
    
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="FeedsterApp">
    
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-2">
            <h1>feedster</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="posts" ng-controller="PostController">
      <div class="container">

    <div class="post" ng-repeat="post in posts">
      <feedster-post post="post"></feedster-post>
        <plus-one></plus-one>
    </div>
      </div>
    </div>

    
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/PostController.js"></script>

    <!-- Directives -->
    <script src="js/directives/feedsterPost.js"></script>

    <script src="js/directives/plusOne.js"></script>

    
  </body>
</html>

feedsterPost.js

app.directive('FeedsterPost', function(){
  return {
    restrict: 'E',
    scope: {
    	post: '='
    },
    templateUrl: 'js/directives/feedsterPost.html'
  };
});

feedsterPost.html

<img class="avatar" ng-src="{{ post.author.avatar }}">
<h3 class="author-name">{{ post.author.name }}</h3>
<p class="comment-text">{{ post.comment.text }}</p>
<img class="comment-img" ng-src="{{ post.comment.img }}">

app.js

var app = angular.module("FeedsterApp",[]);

PostController.js

app.controller('PostController', ['$scope', function($scope) {
  $scope.posts = [
    {
      author: {
        name: 'Calvin Broadus, Jr.',
        avatar: 'img/cbj.svg'
      },
      comment: {
        img: 'img/dog.jpg',
        text: 'How much for that dogg in the window?'
      }
    },


    {
      author: {
        name: 'Matthew Healy',
        avatar: 'img/mh.svg'
      },
      comment: {
        text: 'I used to have a recurring dream when I was younger.'
      }
    }
  ];  
}]);

#2

Hey there, your code looks just fine ... maybe browser issue? which one are you using?


#3

Hi ... I think the problem is in the directive's"FeedsterPost" name it should start with lower case f


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.