I have completed all previous steps, but all i see as a result is two white rectangles with no text or pictures. I looked through the code several times, but can't seem to find the mistake. I will appreciate any help.
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>
</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>
</body>
</html>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.'
}
}
];
}]);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 }}">