Gameboard doesnt display anything

#1

index.html 

<div class="main" ng-controller="ScoreController">
      <div class="container">
        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>
        </div>
      </div>
</div>

app.js

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

game.html

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period"> {{ info.period }} </p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score"> {{ info.visitor_score }} </h2>
      <h3> {{ info.visitor_team }}
        <span class="visitor-city"> {{ info.visitor_team.city }} </span><br/>
        <span class="visitor-name"> {{ info.visitor_team.name }} </span>
      </h3>
    </div>
    <div class="dash col-xs-3">
      <h2>-</h2>
    </div>
    <div class="home col-xs-4">
      <h2 class="home-score"> {{ info.home_score }} </h2>
      <h3>
        <span class="home-city"> {{ info.home_team.city }} </span><br/>
        <span class="home-name"> {{ info.home_team.name }} </span>
      </h3>
    </div>
  </div>
</div>

game.js

app.directive('game', function() {
  return {
    restrict: 'E',
    scope: {
      info: '='
    },
    templateUrl: 'js/directives/game.html'
  };
});
#2

You excerpted index.html, so we can't confirm that you correctly completed step 1 by attaching the new module to the element. If you haven't yet sorted this out, can you double-check that, or post the full content of your index.html?

#3 

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="Gameboard">
    <div class="header">
      <h1 class="logo">GameBoard</h1>
    </div>

    <div class="main" ng-controller="ScoreController">
      <div class="container">
        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>
        </div>
      </div>
    </div>

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

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

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

  </body>
</html>
#4

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