Can't seem to get it to work (Stuck at Step 5 I think)


#1

Hello i've been trying to get this assignment to work for a couple of days now, and been Googleing and Googleing so much, and now im gonna ask for help here... The code i've written that i think is correct is not showing up in the Localhost....

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=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Montserrat: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="BoltNetworkApp">
    <div class="header">
      <div class="container">
        <img src="img/logo.svg" width="180" height="34">
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">
         <program-listing  listing="program"></program-listing>
      </div>
    </div>
        </div>
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <h3>Bolt</h3>
            <ul>
              <li>Careers</li>
              <li>Terms</li>
              <li>Help</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>More Bolt</h3>
            <ul>
              <li>Gift Cards</li>
              <li>Trailers</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>News</h3>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
            </ul>
          </div>
        </div>
      </div>
      
    <!-- Directives -->
      <script src="js/directives/programListing.js"></script>
      
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>
    
  </body>
</html>

MainController.js

  app.controller('MainController', ['$scope', function($scope) {
      $scope.program = {
        series: "Sherlock",
        series_img: "img/sherlock.jpg",
        genre: "Crime drama",
        season: 3,
        episode: "The Empty Hearse",
        description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.",
        datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
      }
    }]);

ProgramsListing.js

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

ProgramListing.html

 <div class="row">
            
  		<div class="col-md-3" class="series_img" ng-src="{{ listing.series_img }}">
        </div>
            
            <div class="col-md-6">
              <h1 class="series">{{ listing.series }}</h1>
              <h2 class="episode"> {{ listing.epsiode }}</h2>
              <p class="description"> {{  listing.description  }}</p>
            </div>

            <div class="col-md-3">
              <ul class="list-group">
                <li class="list-group-item"><span>Date: {{ listing.datetime | date:'mediumDate'}}</span>  </li>
                <li class="list-group-item"><span>On air:{{ listing.datetime | date:'fullDate' }} </span>  </li>
                <li class="list-group-item"><span>Time:{{ listing.datetime | date:'shortTime' }}</span>  </li>
                <li class="list-group-item"><span>Season:{{ listing.season }}</span>  </li>
                <li class="list-group-item"><span>Genre:{{ listing.genre }}</span>  </li>
              </ul>
            </div>
            
          </div>

#2

All your code looks correct except that you should list the directive script as the last and final script because sequence in important. Try moving this to the bottom below the controller script. I hope this helps. Good Luck!


#3

Wow all thoose hours for that little thing! Thank you i can now proceed again!


#4

in ProgramListing.html "

{{ listing.epsiode }}

" correcting the attribute

#5

I copied the same code but I am not able to view anything??


#6

Did you move the directive script to the final script in the viewer?


#7

epsiode is spelt incorrectly. Change to episode and it should run.


#8

Any pointers on how to make the img element appear? I'm using the same code as listed above, but the images won't come up.


#9

The upper code is wrong. The ng-src should be in the img tag.


#10

did you forget step 6: "add another object to the controller"?