Stuck on Step Seven

angularjs

#1

No idea what's going on. I thought I followed the instructions. Now, I'm trying to follow the instructions for posting questions on here. I have nothing displaying in my local browser. I do not know why. I'm stuck on step seven before you are to view your progress on the localhost. Here's my index.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="post"div ng-repeat="post in posts">
   <feedster-post post="post"></feedster-post>
        </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>  
  </body>
</html>

here's my feedsterPost.html


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

`

The Feedster directive is here:


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

Finally, here's the app.js file


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

What have I done wrong? Any ideas?


#2

Howdy!

1.

I see an extra "div" inside your

<div class="post">

right before your ng-repeat.

See attached image below.

2. In your feedsterPost.html file...

Since we are passing information into this directive through a directive named post, I think this is how your directive's template code should look:

<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 }}">

Hope this helps.


#3

That's it!

I screwed up on the directive's template.

Thanks.

Tom


#4

I am stuck in the same exercise. i most likely missed something that i couldn't figure out what it is.
here are my code:

html:


<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>
    </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>



Uploading...


#5

I do not see it, but it could be here:

I do not have my pro account anymore, so I cannot go in and troubleshoot this. I would ask the pros on call with the chat feature, they have source code. Oftentimes, I was missing something in the HTML, like an extra DIV, or I improperly named the Angular elements.

Good luck.


#6

What did you screw up?


#8

you have a syntax error in feedsterPost.js: remove the comma after templateUrl.

angularJS is very picky about its commas so make sure you only put a comma in if its not the last item; just like post inside scope is the last item therefore no comma.