Can't figure out the info attribute


#1

What is wrong with my code? I get the repeated templates, but no data. Trying to figure this out. It seems that I do not quite understand how the, in this example, info attribute works with directives.
index.html

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

game.html

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period"> </p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score">{{ game.visitor_score }}</h2>
      <h3>
        <span class="visitor-city">{{ game.visitor_team.city }}</span><br/>
        <span class="visitor-name">{{ game.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">{{ game.home_score }}</h2>
      <h3>
        <span class="home-city">{{ game.home_team.city }}</span><br/>
        <span class="home-name">{{ game.home_team.name }}</span>
      </h3>
    </div>
  </div>
</div>

#2

Ok, it seems that a bit of additional reading about Isolated Directive Scopes gave clarity to the picture.

The info attribute needs a model to be passed in. Since we use ng-repeat="score in scores", then score is the model.

Correct directive:

<game info="score" ng-repeat="score in scores"></game>

Correct game.html

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period"> </p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score">{{ info.visitor_score }}</h2>
      <h3>
        <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>

#3

Thanks! Solves exactly my problem