custom angular directive is not rendering

Question

I am trying to create a directive, but for some reason nothing is rendering. The screen is blank.

index.html

<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
         <program-listing listing="program"></program-listing>
    </div>
  </div>
</div>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/programListing.js"></script>

js/controllers/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)
  };

}]);

js/directives/programListing.js

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

js/directives/programListing.html

  <div class="row">

    <div class="col-md-3" class="series_img">
      {{ listing.series_img }}
    </div>

    <div class="col-md-6">
      <h1 class="series">{{listing.series}}</h1>
      <h2 class="episode">{{listing.episode}}</h2>
      <p class="description">{{listing.description}}</p>
    </div>

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

  </div>

Why isn't anything rendering?

Answer 1

templateUrl is an argument to your directive. You should not have it in your scope. Your directive doesn't know what to render!

scope = {...},
templateUrl = '...'